What is the best way to handle search params in metadata?

[JamesSingleton]

Summary

I have a search page where I do ?q=${whatever_the_user_searched}. I am currently doing

export function generateMetadata({ searchParams }: { searchParams: { [key: string]: string } }) {
  const query = searchParams['q'] ?? null
  const defaultMetadata = defineMetadata({
    title: `Search Results for "${query}"`,
    description:
      'Explore the latest College Football news and updates at Redshirt Sports. Stay informed about scores, highlights, and team analyses in one place.',
  })

  return {
    ...defaultMetadata,
    openGraph: {
      ...defaultMetadata.openGraph,
      images: [
        {
          url: `/api/og?title=${encodeURIComponent(`Search Results for "${query}"`)}`,
          width: 1200,
          height: 630,
          alt: `Search Results for "${query}"`,
        },
      ],
      url: `/search?q=${query}`,
    },
    alternates: {
      ...defaultMetadata.alternates,
      canonical: `/search?q=${query}`,
    },
    twitter: {
      ...defaultMetadata.twitter,
      images: [
        {
          url: `/api/og?title=${encodeURIComponent(`Search Results for "${query}"`)}`,
          width: 1200,
          height: 630,
          alt: `Search Results for "${query}"`,
        },
      ],
    },
  }
}

However, that gives me

Dynamic server usage: Page couldn't be rendered statically because it used `searchParams.q`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error

Do I need to force it to be dynamic so Next.js just doesn't try to render it statically?

Additional information

No response

Example

No response

[icyJoseph]

Hi,

I guess so, because during pre-rendering there's no Query Params to be used. At the moment, this page should be rendered on-demand.

[sz0tu]

Use middleware to set your queryParams to cookie.

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(request: NextRequest) {
  const YOUR_VALUE = request.nextUrl.searchParams.get("YOUR_VALUE");
  const response = NextResponse.next();

  if (refId) {
    response.cookies.set("temp-YOUR_VALUE", YOUR_VALUE, {
      maxAge: 60,
      httpOnly: true,
      path: "/",
    });
  }

  return response;
}

export const config = {
  matcher: "/",
};

then

export async function generateMetadata(): Promise<Metadata> {
  const cookieStore = await cookies();
  const YOUR_VALUE = cookieStore.get("YOUR_VALUE")?.value;
}