[cache components]: build fail because of request.nextUrl.searchParams

[coderrshyam]

Summary

I am using Next.js@16 with react compiler, cache components and turbopack.

I got build error in route.ts:

  29 |     const title = searchParams.get("title") || siteShortDescription;
  30 |     const description = searchParams.get("description") || siteDescription; {
  digest: 'NEXT_PRERENDER_INTERRUPTED'
}
Error generating OG image: Error: Route /api/og needs to bail out of prerendering at this point because it used nextUrl.searchParams.
    at C (turbopack:///[project]/src/app/api/og/route.tsx:27:42)
  25 |     const { geist, geistMono } = getFontData();
  26 |
> 27 |     const searchParams = request.nextUrl.searchParams;
     |                                          ^
  28 |
  29 |     const title = searchParams.get("title") || siteShortDescription;
  30 |     const description = searchParams.get("description") || siteDescription; {
  digest: 'NEXT_PRERENDER_INTERRUPTED'
}

What I do at this point as searchParams is required to genrate og image.

Additional information

No response

Example

No response

[icyJoseph]

Add await connection() https://nextjs.org/docs/app/api-reference/functions/connection - at top of the GET route handler. We'll fix the docs on this soon.

[coderrshyam]

Some code:

// api/og/route.ts

function getFontData() {
  return {
    geist: readFileSync(join(process.cwd(), "public/fonts/Geist.ttf")),
    geistMono: readFileSync(join(process.cwd(), "public/fonts/GeistMono.ttf")),
  };
}

export async function GET(request: NextRequest) {
  try {
    const { geist, geistMono } = getFontData();

    const searchParams = request.nextUrl.searchParams;

    const title = searchParams.get("title") || siteShortDescription;
    const description = searchParams.get("description") || siteDescription;

    const { titleFontSize, descFontSize } = calculateMetadataFontSizes(
      title.length,
      description.length
    );
    const truncatedDescription = truncateMetadataDescription(description);
    const dashedBorder = "2px dashed rgba(100, 100, 100, 0.7)";
    const cornerBorder = "2px solid rgba(200, 200, 200)";

    return new ImageResponse(
           ............code
       ),  {
        fonts: [
          { data: geist, name: "Geist", style: "normal", weight: 600 },
          { data: geistMono, name: "Geist Mono", style: "normal", weight: 400 },
        ],
        height: 628,
        width: 1200,
      }
    );
  } catch (error) {
    console.error("Error generating OG image:", error);
    return new Response("Failed to generate image", { status: 500 });
  }
}

// lib/metadata.ts

import type { Metadata, Route } from "next";
import { siteDescription, siteName, siteShortDescription, siteURL } from "@/config/site";

interface CreateMetadataOptions extends Metadata {
  url: Route;
  img?: string;
}

export function createMetadata({ url, img, ...options }: CreateMetadataOptions): Metadata {
  const title = options.title ?? siteShortDescription;
  const description = options.description ?? siteDescription;

  const titleString = typeof title === "string" ? title : siteShortDescription;
  const descriptionString = typeof description === "string" ? description : siteDescription;

  const image = `${siteURL}/${img ? img : `api/og?title=${encodeURIComponent(titleString)}&description=${encodeURIComponent(descriptionString)}`}`;

  return {
    title,
    description,
    openGraph: {
      title: titleString,
      description: descriptionString,
      siteName,
      locale: "en_US",
      type: "website",
      url: new URL(url, siteURL).toString(),
      images: [{ url: image, alt: siteShortDescription, height: 628, width: 1200 }],
      ...options.openGraph,
    },
    twitter: {
      title: titleString,
      description: descriptionString,
      creator: "@ShyamVerma9240",
      card: "summary_large_image",
      images: [{ url: image }],
      ...options.twitter,
    },
    ...options,
  };
}

export function calculateMetadataFontSizes(titleLength: number, descLength: number) {
  return {
    titleFontSize: titleLength > 60 ? 48 : titleLength > 40 ? 56 : titleLength > 20 ? 64 : 72,
    descFontSize: descLength > 120 ? 24 : descLength > 80 ? 28 : 30,
  };
}

export function truncateMetadataDescription(description: string, maxLength = 160) {
  return description.length > maxLength
    ? `${description.substring(0, maxLength - 3)}...`
    : description;
}

export { siteName, siteURL, siteShortDescription, siteDescription };

Usage:

export const metadata: Metadata = createMetadata({
  title: siteConfig.shortDescription,
  description: siteConfig.description,
  url: "/",
});
``

[icyJoseph]

Yeah - alright I can reproduce the logs, but the build passes and upon start the image is served correctly, right?

And this error logs come from the try/catch you have 🤔

[coderrshyam]

Yes! But this is happening since I upgrade to next.js 16 and enable cache components. Without cache components, no logs are logged.

Why this error logs are displayed?

By the way all things are good expect this log.

[icyJoseph]

I understand now, a little better at least.

I am adding this to the docs soon, but GET handlers go through the same model as pages in Cache Components.

Here the access to searchParams, causes the handler to "give up" on build time. Your try catch sees that. If you move the access to search params out of the try/catch then you'd stop seeing this issue.

Edit:

x-ref: See also #87732 for the same error with request.url.

Two approaches:

1. Just ignore it (Error: Route /api/og needs to bail out of prerendering at this point because it used request.url. #87732): This error comes from Cache Components attempting to prerender your GET handler at build time. The build succeeds and the route works correctly at runtime. Suppress the logs with

The build succeeds and the route works at runtime. Suppress the logs with:

  // next.config.js                                                                                                                                                      
  experimental: {
    hideLogsAfterAbort: true
  }

2. Clean it up (original answer to this discussion): The try-catch intercepts the special bailout error Next.js throws to signal "stop prerendering." - to fix it you may:

- Move searchParams access before the try-catch
- Or add await connection() from next/server at the top to explicitly opt out of prerendering

Next.js throws a special error when you access dynamic data like searchParams - it's how the framework knows to bail out of prerendering. When that throw lands inside a try-catch, it gets swallowed instead of propagating. See https://nextjs.org/docs/app/getting-started/route-handlers#with-cache-components for more info.

[coderrshyam]

Thanks @icyJoseph, I will remove unwanted try-catch block.

One more issue:

Sometimes, I see a message that says “Cache Disabled” on the Next.js dev badge.
When I click on it, nothing happens — there’s no extra information or explanation.

I also couldn’t find any documentation that explains what this means or why it happens.

[icyJoseph]

Hi that can happen if you open dev tools and have the disable cache option

[icyJoseph]

This option:

If you check it and reload, you'll see that badge.

[coderrshyam]

The "disable cache" button is unchecked but still shows this badge, this badge shown sometimes not every time like when i do hard refresh.

[GuzH09]

I've found the same issue while testing random things the other day. Ended up fixing it by awaiting connection on top.

I've created this repo to replicate the problem. It happens on canary version too:
GuzH09/nextjs16-api-error

[dsbrianwebster]

@GuzH09 thank you for this repo. Answered my questions and saved me some grey hairs.

[icyJoseph]

Hi, kind of the answer, but not really...

The answer is here: #85412 (reply in thread)

I'll edit it with more info, unfortunately GitHub's UI collapsed into a "show more" cuz OP didn't pick it as an "answer". I have done that unilaterally and will dump some more info into it.