Skip to main content

Resolving "app/ Static to Dynamic Error" in Next.js

Why This Error Occurred​

The "app/ Static to Dynamic Error" happens when one of your routes in the app/ directory is initially generated statically at build time, but during runtime it attempts to use dynamic server values (such as cookies() or headers()) either for a fallback path or while a path is being revalidated.

Currently, Next.js does not support switching between static and dynamic types during runtime, so the system throws an error.

Possible Ways to Fix It​

To resolve this issue, you have two main options:

  1. Prevent the conditional use of dynamic server values that may cause the static/dynamic mode of the page to differ between build time and runtime. This ensures consistency in the rendering mode of your page.

  2. Leverage the dynamic export to control the handling of your page. If you want to ensure your page is always handled statically, regardless of the usage of dynamic server values, you can use export const dynamic = 'force-static'. Conversely, if you prefer your page to always be dynamic, you can use export const dynamic = 'force-dynamic', and your page won't attempt to be statically generated.