Error: Dynamic server usage: cookies, when using components with cookies in components with generateStaticParams() Next 13.4.5

Question

1. In my app/layout.js, I have imported a <Navbar /> component as a server component.
2. In the <Navbar /> component I have imported the cookies package from next/headers in order to get a logged in user's details from the backend using a token from the cookies.
3. Everything works fine when I visit any pages at all until I visit a app/listings/[id]/page.js page that contains the generateStaticParams() function, and then my application breaks down with this error:

Unhandled Runtime Error
Error: Dynamic server usage: cookies

I have tried all possible solutions but nothing seems to work and I don't understand why this should be an issue. Can anybody explain to me with solutions on why this is so? Thanks in advance

Answer 1

I've been facing the same issue lately and recently found this NextJs Page Maybe this could help Also this is a copy of the question https://github.com/vercel/next.js/issues/49373 You can keep a check here for any updates

Answer 2

Adding export const dynamic = "force-dynamic" on every page (not component) helped in my case.

The error still sometimes occurs in dev mode and goes away after a page reload, but never occurs in the production build.