Next.js Discord

Discord Forum

Dynamic server usage: Route /posts couldn't be rendered statically because it used cookie

Answered
American black bear posted this in #help-forum
Open in Discord
American black bearOP
can someone help me?
I had my next.js application structured like: /app/[locale]/[lang]/**, but then I removed the locale and lang and now I have some issues like this one:
Dynamic server usage: Route /posts couldn't be rendered statically because it used cookies

If I add the locale and lang folders again the errors disappear

I already deleted the .next folder and ran the script again. The error persists...
Answered by B33fb0n3
Reading search parameters through useSearchParams() without a Suspense boundary will opt the entire page into client-side rendering. This could cause your page to be blank until the client-side JavaScript has loaded.

So you might want to wrap your Component that uses useSearchParams inside a suspense boundary like:
<Suspsense fallback={<p>Some Fallback</p>}>
  <ComponentThatNeedsSearchParams />
</Suspense>
View full answer

17 Replies

@American black bear can someone help me? I had my next.js application structured like: `/app/[locale]/[lang]/**`, but then I removed the locale and lang and now I have some issues like this one: `Dynamic server usage: Route /posts couldn't be rendered statically because it used cookies` If I add the locale and lang folders again the errors disappear I already deleted the .next folder and ran the script again. The error persists...
B33fb0n3
remove both folders. Now check where you are using the cookies function (maybe you saved your locale inside the cookies or somiliar). Just check where you used it.

After that check if the route where the cookies are called was rendered statically. If so, either make it dynamic or remove the cookie function
and what do you mean by saving the locale with the cookies func?
@American black bear both folders?
B33fb0n3
yea, the locale and the lang folder, that you mentioned.
@B33fb0n3 yea, the locale and the lang folder, that you mentioned.
American black bearOP
I already deleted them
@American black bear and what do you mean by saving the locale with the cookies func?
B33fb0n3
it was just an expression so you might know where the error comes from
@American black bear I already deleted them
B33fb0n3
great
Now check where you are using the cookies function (...). Just check where you used it.
@B33fb0n3 it was just an expression so you might know where the error comes from
American black bearOP
well that's fun bcs in the posts page I don't use cookies
it seems like I fixed. when I run the build script locally it works fine, but the pipeline is always failing
⨯ useSearchParams() should be wrapped in a suspense boundary at page "/auth". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout

I mean, wth
why would I need to do this?
@American black bear ⨯ useSearchParams() should be wrapped in a suspense boundary at page "/auth". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout I mean, wth
B33fb0n3
Reading search parameters through useSearchParams() without a Suspense boundary will opt the entire page into client-side rendering. This could cause your page to be blank until the client-side JavaScript has loaded.

So you might want to wrap your Component that uses useSearchParams inside a suspense boundary like:
<Suspsense fallback={<p>Some Fallback</p>}>
  <ComponentThatNeedsSearchParams />
</Suspense>
Answer
@American black bear but why I don’t have this error locally?
B33fb0n3
idk. Wrap it with a suspense boundary and you are good to go 👍
American black bearOP
yeah it makes sense
i appreciate ur help
B33fb0n3
happy to help