nextjs-app-router-patterns

Fetch data directly inside async Server Components using the fetch API with caching options like next.revalidate for ISR or next.tags for tag-based invalidation. Server Components run only on the server, so no useEffect or client-side fetching is needed.

Migrate incrementally by moving pages into the app directory, converting getServerSideProps and getStaticProps into async Server Components, and replacing API routes with route handlers. The App Router supports both routers side by side during migration.

Add 'use client' only when a component needs interactivity such as useState, useEffect, event handlers, or browser APIs. Start with Server Components by default and push client boundaries as far down the tree as possible.

Server Actions are async functions marked with 'use server' that run on the server for mutations like form submissions. They support progressive enhancement, revalidateTag or revalidatePath for cache updates, and redirect for navigation after completion.

Parallel routes use named slots like @analytics to render multiple pages simultaneously with independent loading states. Intercepting routes like (.)photos let you show a modal over the current page while keeping a full-page version for direct navigation.

Streaming fails when data fetching happens in the parent page component before rendering Suspense boundaries. Move slow fetches into child components wrapped in Suspense so the shell renders immediately while slow sections stream in.