The problem

You've created some blog pages and have been developing them, making sure they render well statically. At some point, you noticed that they stopped rendering statically and started rendering anew on every request.

Cause

I used the function cookies provided by Next.js in the Provider at the top of the app.

import { cookies } from 'next/headers';

function Proivder {
  const cookie = cookies().....
}

Next.js defaults to static rendering. However, it switches to dynamic rendering if a request is not cached during rendering or if a . dynamic function is used.

Sincecookies is one of the dynamic functions, and since we used it in the Producer, all the pages and components below it will also rely on this dynamic data. Therefore, a page that was working fine as a static page has become a dynamic page.

Workaround

Paste the following code at the top of the page to solve the problem

export const dynamic = 'force-static';

However, you should be aware that inserting this code has the following issues

• Dynamic data inaccessibility: This setting makes it impossible to access point-of-request data such as headers, cookies, etc. Calling these functions will return default values or empty data.