nextjs-app-router-patterns

App Router uses file conventions like layout.tsx and page.tsx to define routes. Server Components are the default; mark client-side code with 'use client' directive. Organize by route segments, placing shared layouts at appropriate nesting levels to separate server and client logic cleanly.

Streaming in App Router progressively sends HTML to the browser using React Server Components and Suspense boundaries. Wrap async data fetches in Suspense, define fallback UI, and Next.js streams completed chunks immediately rather than waiting for all data, improving perceived performance.

Yes. Parallel Routes let you render multiple segments simultaneously within the same layout using the @folder convention. Intercepting Routes intercept navigation to show modals or alternate views. Both use file-system conventions to control rendering without extra configuration.

Static generation (default) pre-builds pages at build time for fastest performance. ISR revalidates cached pages at intervals. Server-side rendering generates pages per request for dynamic content. Choose based on data freshness needs: static for unchanging content, ISR for periodic updates, SSR for real-time data.

Fetch directly in Server Components—no API route needed for internal data. Use async/await, caching via fetch options (revalidate, tags), and co-locate fetches with components. Combine with Server Actions for mutations. Avoid waterfalls by fetching in parallel; use Promise.all or layout-level fetches.

Migration is optional but recommended for new projects. Both routers coexist in Next.js 14+. Incrementally move routes by creating app/ directory, converting pages to layouts and pages using file conventions, updating data fetching to work in Server Components, then remove old pages/ routes.