Using searchParams as page props

[still kraken]

Does using searchParams on page as a prop like this

export default async function Page({
  searchParams,
}: {
  searchParams?: {
    query?: string;
    page?: string;
    orderBy?: string;
  };
}) {}

Will automatically make the page dynamic ?

[covert scaffold]

Hi @still kraken. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Yes, using searchParams as a prop in your page will automatically opt the page into dynamic rendering at request time. This is because searchParams is a Dynamic API whose values cannot be known ahead of time.

Here is an example from the Next.js documentation:

export default function Page({
 params,
 searchParams,
}: {
 params: { slug: string }
 searchParams: { [key: string]: string | string[] | undefined }
}) {
 return <h1>My Page</h1>
}

In this example, searchParams is an object containing the search parameters of the current URL.

You can also force a page to be dynamic by setting the dynamic route segment config option to force-dynamic:

export const dynamic = 'force-dynamic'
 
export default function Page() {
 return (
 <>
 <nav>
 <SearchBar />
 </nav>
 <h1>Dashboard</h1>
 </>
 )
}

Please note that searchParams returns a plain JavaScript object and not a URLSearchParams instance.

For more information, you can refer to the Next.js documentation (https://nextjs.org/docs/app/api-reference/file-conventions/page).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: