next-app-router

The App Router (app/ directory) is Next.js 13+ framework for building applications using server components by default, layouts for shared UI, route handlers for APIs, and colocated data fetching. It replaces the pages/ directory with a file-based routing system that supports streaming, Suspense, and Server Actions for mutations.

Server Components run only on the server, fetch data directly, and reduce JavaScript sent to browsers; Client Components run in the browser and enable interactivity. App Router uses Server Components by default; mark components with 'use client' to make them interactive on the client.

Colocate data fetching directly in Server Components using async/await, native fetch, or database clients. App Router supports automatic caching, revalidation strategies, and Suspense-driven streaming to render components while data loads, improving perceived performance.

Yes, Server Actions are async functions defined in Server Components that handle mutations securely on the server. They integrate with forms and client-side handlers, automatically manage re-renders, and eliminate the need for separate API endpoints for common operations.

Use error.tsx and loading.tsx files in route segments to define error boundaries and loading UI. Combine these with Suspense boundaries in Server Components to stream partial content immediately and replace loading states as data arrives.

Export metadata objects and generateMetadata functions from page and layout files to manage title, description, Open Graph tags, and structured data. App Router handles SEO automation and prevents metadata conflicts across route segments.