[NEXT-601] search params object is empty in production with next 13 app dir

[raymclee]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
Platform: linux
Arch: x64
Version: #1 SMP Fri Apr 2 22:23:49 UTC 2021
Binaries:
Node: 18.8.0
npm: 8.19.2se
Yarn: N/A
pnpm: N/A
Relevant packages:
next: 13.0.4
eslint-config-next: 13.0.4
react: 18.2.0
react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

search params object is empty in production with next 13 app dir
Its ok if its a dynamic route

Expected Behavior

search params object is not empty in production

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://stackblitz.com/edit/nextjs-ncgro9?file=app/page.tsx

To Reproduce

npm run build && npm run start
go to /?page=1
go to /products/1?page=1

_{From SyncLinear.com | NEXT-601}

[Deploydon]

Strange,

Your link does seem to have valid search params when running.

However my app on a newer canary version still seems to have the same issue of empty searchParams when running on Vercel.

[iammatthias]

Ran into this on Next 13.0.5 last night. Works fine locally, but returns undefined once it is published on Vercel.

[neoliao]

Solution. In dev mode searchParams was given, but not in build mode. If you use a client component you need to use the useSearchParams hook: https://beta.nextjs.org/docs/api-reference/use-search-params

Also be aware of the getter-API, you can't access searchParams directly.

[hyperbolictonic]

Can confirm the same issue. Works fine if I "run dev" but returns empty after "run build" then "run start"

[baronha]

same +1

[llorenspujol]

Same, it does not work when deployed on Vercel...

[abakan26]

Search params object is empty after running commands next build, next start

[DrMisQ]

any solution for this problem !!

[Waqas-Abbasi]

With nextjs version 13.0.6 searchParams seem to work as expected. The versions after seem to have this bug

[LIMPIX31]

Same thing. Any solution other than rolling back the version.

[yondifon]

+1.

[Hanskrogh]

Can confirm that it is not only a problem with"app" dir, the issue also happens in "pages" dir. But only upon navigation to index path: (href="/").

[MahmoudAlawdh]

+1

[abakan26]

+1

[simmondsty]

A similar issue is occurring with layout files, when calling an async function, the call is made at build time and then serves the same response on each call. Do not have this issue when dealing with dev.

[Jose-DallAsta-008]

can confirm the error is happening, can also confirm that the version 13.0.6 is also having this issue in the reproduction link (opposing Waqas-Abbasi comment)
+1

[hyperbolictonic]

@ijjk is there any update on a fix for this?

[simmondsty]

@ijjk This is a major issue, breaking essential functionality so I would imagine so.

[alexis78i]

I noticed that on some pages everything works for me, but on others (mostly where 4-5 requests to the API) it does not work.

[leerob]

Thanks for flagging this folks, we will investigate 🙏

[abakan26]

Will the issue be resolved in the next update?

[Trugamr]

You may have to force page to be dynamic to get query params.

This can be done by exporting variable named dynamic and it's value as force-dynamic

export const dynamic='force-dynamic';

export default function Home(props: unknown) {
  return (
    <main>
      <pre>
        {JSON.stringify(props, null, 2)}
      </pre>
    </main>
  )
}

Originally posted by @hubertlepicki in #44005 (comment)

[benkingcode]

Why would you ever want non dynamic props? Isn't that the point of passing them

Pagination, for one example? If you have a URL with ?page=2 all of a sudden this means it's not cacheable? Doesn't make sense to me why query params must force dynamic rendering.

[typeofweb]

The ability to specify static searchParams along with params would be great.

[hyperbolictonic]

Why would you ever want non dynamic props? Isn't that the point of passing them

Pagination, for one example? If you have a URL with ?page=2 all of a sudden this means it's not cacheable? Doesn't make sense to me why query params must force dynamic rendering.

Exactly this. Our users share their searches with each other frequently, having cached versions of those pages takes a load off the server.

[simmondsty]

Why would you ever want non dynamic props? Isn't that the point of passing them

Pagination, for one example? If you have a URL with ?page=2 all of a sudden this means it's not cacheable? Doesn't make sense to me why query params must force dynamic rendering.

Exactly this. Our users share their searches with each other frequently, having cached versions of those pages takes a load off the server.

I don't think either of you understand what the issue is here, searchParams are empty if you do not force-dynamic, so your page param will never reach your route. Of course for data loading you don't always want it to be dynamic...

[iamkibeh]

When will they solve this! Should be fixed asap

[parixscm]

Also having same issue.. !

[Annukul]

Is this issue fixed yet?

[IonelLupu]

it still doesn't work on canary for you @Annukul?

[Annukul]

@IonelLupu Saw that this was just closed 3 days ago. I have upgraded my nextjs version from v13.1.6 to v13.2.4. Let's hope it works

[IonelLupu]

@Annukul try canary. Not 13.2.4. You will see 13.2.4 was released a week ago and this issue was fixed 3 days ago. Which means the fix is not yet officially released.

[Annukul]

@IonelLupu It's not working in v13.2.4. How can I use canary? Also is it safe to use the canary branch? It might have more issues before release

[IonelLupu]

@Annukul just use a version from here that contains "canary" in the name

[MarkWittens]

The latest canary version (v13.2.5-canary.21) works for the most part, but in dev mode (npm run dev) I get an error message on pages using the searchParams:

Dynamic server usage: searchParams.p

After refreshing the page it works fine and production everything works fine as well.

[davecarlson]

Even with the latest canary, and force-dynamic, still having issues with this.

const searchParams = useSearchParams();
const formattedQueryParams = `?${searchParams.toString()}`;

formattedQueryParams is empty

[michaelcummings12]

Even with the latest canary, and force-dynamic, still having issues with this.

const searchParams = useSearchParams();
const formattedQueryParams = `?${searchParams.toString()}`;

formattedQueryParams is empty

useSearchParams only works in client components. For server components, you can use the optional searchParams page prop.

export default function Page({ searchParams }: { searchParams: { [key: string]: string | string[] | undefined } }) {
  const formattedQueryParams = `?${searchParams.toString()}`;
  return <p>{formattedQueryParams}</p>;
}

[yamsellem]

@Trugamr solution works fine with next 13.2.x but does not work with 13.3.x. Anyone has experienced this too?

[mbuffa]

Hello there.

I'm not sure how this is related, or if I'm doing something wrong, but I'm encountering a similar issue, with:

• NextJS 13.3.0
• No app or src dir
• JS setup
• Dev (no production env yet)
• On the server-side with an Edge API endpoint
• Using Fetch API on client-side to do the call (await fetch('/api/dropbox/authorize?auth_code=' + code);)
• No particular middleware
• I generated the project a few hours ago with the official tool

Accessing req.query works with a NodeJS API endpoint, but it seemed easier to handle cookies, so I switched.

Here's the relevant NextRequest nextUrl value:

{
  cookies: REDACTED,
  geo: {},
  ip: undefined,
  nextUrl: {
  href: 'http://localhost:3000/api/dropbox/authorize?auth_code=REDACTED',
  origin: 'http://localhost:3000',
  protocol: 'http:',
  username: '',
  password: '',
  host: 'localhost:3000',
  hostname: 'localhost',
  port: '3000',
  pathname: '/api/dropbox/authorize',
  search: '?auth_code=REDACTED',
  searchParams: URLSearchParams {  },
  hash: ''
}

If I toString() the searchParams object, I get the equivalent of the search field (without question mark).

Edit: Same issue with Next 13.2.x.

[ellemedit]

In development, RSC searchParams works without any additional configuration but production build searchParams not work in same conditions.

Only works when I set:

export const dynamic = "force-dynamic";

Is this intended? I don't so as documentation explains...

[davecarlson]

Apparently so.

Personally, I'm not a have of having to use to different apis to get the data and having to figure out which to use in which content ( server / client ).

It all seems rather, messy

[DannyPark1]

is this issue solved? at the latest version?

[MarkWittens]

In development, RSC searchParams works without any additional configuration but production build searchParams not work in same conditions.

Only works when I set:

export const dynamic = "force-dynamic";

Is this intended? I don't so as documentation explains...

I hope not, this makes every page dynamic (i.e. partially uncachable) that might have a filter or pager in the query parameters for example.

[timneutkens]

• useSearchParams works in both static / dynamic rendering cases. Keep in mind to wrap a Suspense boundary around the point where you're using it. Docs: https://nextjs.org/docs/app/api-reference/functions/use-search-params#behavior
• When reading searchParams on page.js (or .ts) it will opt-out of static, because searchParams are not know at build time.

If you're running into an issue please open a new one with a reproduction, happy to have a look!

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.