Next.js App Router Best Practices

Chapter 2 · Practice 6 of 6

Lock marketing and blog routes static with ensureStatic

From Caching with Cache Components

Why it matters

One dynamic component added by mistake can turn a fully static page into one that renders on every request, which costs server time and money. Next.js 16.4 adds the ensureStatic route segment config to catch that at build time.

  • 'navigation': the build fails if any dynamic content appears in the route.
  • 'shell' or 'prefetch': use these when only the first load or the prefetch must be static.

Set it on a layout to cover every page below it, then relax it on the specific pages that need dynamic content. This works well for marketing pages and blogs, where every route should be static and a regression is easy to miss in review.

Example

TSX
// app/blog/layout.tsx
export const ensureStatic = 'navigation';

export default function BlogLayout({ children }: LayoutProps<'/blog'>) {
  return <main>{children}</main>;
}