Search params info

[south smelt]

When adding searchParams to page arguments, are the params already URI decoded or do I need to do this myself?

[fathom canyon]

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

---

When adding searchParams to page arguments in Next.js, the params are not automatically URI decoded. You will need to decode them yourself.

This behavior is highlighted in the issue where special characters passed to dynamic routes are not decoded before they are passed to the page.js/layout.js/etc files. For example, navigating to a route like /status/java/play.hypixel.net:25565 will have the params.address value passed as play.hypixel.net%3A25565 instead of being decoded (source: Github Issue 48058 (https://github.com/vercel/next.js/issues/48058)).

To handle this, you can use decodeURIComponent() to decode the parameters manually.

Here is an example of how you might handle this in your code:

export default function Page({ params, searchParams }) {
  const decodedParams = Object.fromEntries(
    Object.entries(params).map(([key, value]) => [key, decodeURIComponent(value)])
  );

  const decodedSearchParams = Object.fromEntries(
    Object.entries(searchParams).map(([key, value]) => [key, decodeURIComponent(value)])
  );

  console.log(decodedParams);
  console.log(decodedSearchParams);

  return (
    <div>
      <pre>{JSON.stringify(decodedParams, null, 2)}</pre>
      <pre>{JSON.stringify(decodedSearchParams, null, 2)}</pre>
    </div>
  );
}

For more information on handling search params in Next.js, you can refer to the Next.js documentation on useSearchParams (https://nextjs.org/docs/app/api-reference/functions/use-search-params#pages).

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