nextjs-app-router

Dynamic routes in App Router use file-system based routing with [slug] syntax in folder names. Create folders like app/posts/[id] to capture route parameters, then use generateStaticParams to pre-render pages and access params in your component via props.

Server components execute only on the server and can access databases directly; client components run in the browser and handle interactivity. App Router defaults to server components unless you add 'use client' at the top, letting you mix both for optimal performance and features.

Streaming with App Router uses React Suspense boundaries and loading.js files. Place loading.js in any route segment to show UI while async content renders, and wrap components in Suspense to stream page chunks progressively for faster perceived performance.

Yes, App Router supports file-system based nested layouts through layout.js files in each directory. Layouts wrap child routes, persist across navigation, and can be nested at any depth—root layout.js applies globally, while segment layouts apply only to their route subtree.

App Router is the modern approach for Next.js 13+ apps and is recommended for new projects, but migration from Pages Router is gradual—both can coexist in the same project. Choose App Router for server components, streaming, and layout reuse; Pages Router works fine for existing apps.

Export a metadata object or generateMetadata function from layout.js or page.js files to define page titles, descriptions, and Open Graph tags. App Router automatically handles merging metadata from parent and child segments for proper SEO across nested routes.