next.js: Error: Dynamic server usage: searchParams.userId
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
Node: 19.3.0
npm: 9.2.0
Yarn: 1.22.19
pnpm: N/A
Relevant packages:
next: 13.3.4
eslint-config-next: 13.3.4
react: 18.2.0
react-dom: 18.2.0
Which area(s) of Next.js are affected? (leave empty if unsure)
App directory (appDir: true)
Link to the code that reproduces this issue
https://github.com/AntonioErdeljac/next13-airbnb-clone
To Reproduce
this is a youtube course that I took: https://www.youtube.com/watch?v=c_-b_isI4vg&t=27105s&ab_channel=CodeWithAntonio the code is available at his github account: https://github.com/AntonioErdeljac/next13-airbnb-clone to reproduce, clone the repo, and build. it builds fine. update the next version from 13.2.4. to the latest, 13.3.4 and build. you will get a build error.
Describe the Bug
the code runs fine on dev, but when I run build (with next ver 13.3.4), it fails with the error: Error: Dynamic server usage: searchParams.userId
we are receiving several params from the url, all are optional. no params at all is fine. the relevant code is in page.tsx, ‘Home’. lines 9 to 14.
Expected Behavior
should build fine with no error.
Which browser are you using? (if relevant)
chrome
How are you deploying your application? (if relevant)
vercel. (failing because of this issue)
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 10
- Comments: 17 (1 by maintainers)
Commits related to this issue
- fix: use dynamic - force-dynamic https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic https://github.com/vercel/next.js/issues/49182 — committed to alan10332000/next-airbnb by alan10332000 a year ago
- fix: build error # 錯誤紀錄 ```sh Generating static pages (0/11)Error: Error: Dynamic server usage: searchParams.userId at getListings (/Users/tvbs/Documents/GitHub/airbnb-video/.next/server/chunks/275.... — committed to andygithub9/airbnb-video by andylin9 a year ago
If I do ‘force-dynamic’ I get this error:
Error: Dynamic server usage: force-dynamic. Has anyone experienced it? What does it mean and what should I do about it?I’m just reading searchParams, nothing fancy is going on.
somebody is whispering in my ear that I should add export const dynamic = ‘force-dynamic’ at the top of main page.tsx. is that true? where can I learn more about this? what does it mean?
Next.js docs here state:
Isn’t this a bug with Next.js? It should automatically pick up on usage of
props.searchParams, right? We shouldn’t have to add the route segment configuration ofexport const dynamic = "force-dynamic"@RonAlmog, I think this should be reopened.
I’m experiencing the same issue as @StructuralRealist. My layout is checking the cookies because of the users auth state. So
export const dynamic = 'force-dynamic'is necessary. However, adding it throws the errorError: Dynamic server usage: force-dynamicwhen navigating to a page with this layout or a hot reload is performed. But only in dev mode.Adding
export const dynamic = 'force-dynamic'doesn’t work in my case. Also, according to the docsWhich suggest that you don’t need to add the
dynamicconstant.In my case it only happens in development mode and only when you navigate to the page or make a change in the code. If you do a full refresh it doesn’t show the error.
It seems for me the problem is fixed in
13.4.13Adding the line => export const dynamic = ‘force-dynamic’ at the top of page.tsx worked for me as well. Thank you!
The same issue:
https://github.com/AntonioErdeljac/next13-airbnb-clone/issues/12
Docs:
https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic
/* export const dynamic = “force-dynamic” */ worked for me
got this error Unhandled Runtime Error Error: Dynamic server usage: force-dynamic
while adding export const dynamic = ‘force-dynamic’
Adding export const dynamic = ‘force-dynamic’ worked in my case. Thank you so much!
I think you forgot to close the issue