Next.js Idioms and Patterns

Next.js App Router boundaries require dedicated loading, error, and not-found files within route segments to handle streaming and failures. Using these file conventions ensures proper Suspense wrapping and recoverable error states without breaking the entire route layout.

Use Server Components by default for data fetching and rendering, restricting Client Components to interactivity. Indiscriminate use of the 'use client' directive prevents server-first data access and causes performance regressions in your Next.js application.

Invalidate the Next.js cache after Server Action mutations by calling revalidatePath or revalidateTag. This ensures your data freshness without falling back to legacy fetching methods or manual cache clearing.

Migrating from getServerSideProps and getStaticProps involves moving data fetching directly into Server Components and using dynamic rendering. The Next.js App Router replaces these legacy functions with server-side fetching and streaming via Suspense.

Handle SEO metadata in Next.js App Router by using the metadata APIs for per-page configuration. This replaces the legacy Head component and allows dynamic generation of title and meta tags directly from Server Components.

Sequential awaits in Next.js Server Components block rendering and delay the response time. Fetching data in parallel prevents these waterfalls, improving performance and allowing the route to stream effectively with Suspense.