Skip to content
DocsErrorsResolving "app/ Static to Dynamic Error" in Next.js

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

This document explains the "app/ Static to Dynamic Error" in Next.js and provides potential solutions to resolve it.

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.

  • Static and Dynamic Rendering - Learn more about the differences between static and dynamic rendering in Next.js.
  • Dynamic APIs - Understand more about the usage of dynamic server functions in your Next.js application.