NEXTJS_REQUIRE_EXPLICIT_DYNAMIC

Requires explicitly setting the `dynamic` route segment option for Next.js pages and routes.
Table of Contents

Conformance is available on Enterprise plans

This rule is available from version 1.3.0.

This rule conflicts with the experimental Next.js feature Partial Prerendering (PPR). If you enable PPR in your Next.js app, you should not enable this rule.

For convenience, Next.js defaults to automatically selecting the rendering mode for pages and routes.

Whilst this works well, it also means that rendering modes can be changed unintentionally (i.e. through an update to a component that a page depends on). These changes can lead to unexpected behaviors, including performance issues.

To mitigate the chance that rendering modes change unexpectedly, you should explicitly set the dynamic route segment option to the desired mode. Note that the default value is auto, which will not satisfy this rule.

By default, this rule is disabled. To enable it, refer to customizing Conformance.

For further reading, see:

This rule will catch any pages or routes that:

  • Do not have the dynamic option set to a valid value.
  • Have the dynamic option set to 'auto' (which is the default value).

In the following example, the page component does not have the dynamic route segment option set.

app/page.tsx
export default function Page() {
  // ...
}

The next example sets the dynamic route segment option, however it sets it to 'auto', which is already the default behavior and will not satisfy this rule.

app/dashboard/page.tsx
export const dynamic = 'auto';
 
export default function Page() {
  // ...
}

If you see this issue in your codebase, you can resolve it by explicitly setting the dynamic route segment option for the page or route.

In this example, the dynamic route segment option is set to error, which forces the page to static, and will throw an error if any components use dynamic functions or uncached data.

app/page.tsx
export const dynamic = 'error';
 
export default function Page() {
  const text = 'Hello world';
  return <div>{text}</div>;
}
Last updated on July 23, 2024