nextjs-routes-and-layouts

Next.js App Router uses a file-based routing system where `layout.tsx` files define shared UI shells and `page.tsx` files define route content. Nest these files in directories to create hierarchical routes, and use route groups (folders in parentheses) to organize routes without affecting URLs.

Dynamic routes use bracket notation: `[slug]` matches a single segment, `[...slug]` catches all remaining segments. Place these in directories alongside `page.tsx`, and add `not-found.tsx` to handle invalid routes gracefully.

Server components execute on the server by default in App Router, reducing bundle size and enabling direct database access. Use client components only when you need interactivity, state, or browser APIs; this boundary ensures optimal performance and security.

Yes, shadcn/ui components work with App Router. Mark shadcn/ui components as client components with 'use client' directives when they require interactivity, and import them into your `layout.tsx` or `page.tsx` files for consistent UI across routes.

Parallel routes use folder syntax like `@sidebar` to render multiple segments simultaneously in the same layout. Intercepting routes use `(..)folder` or `(...)folder` notation to intercept and display alternative content while maintaining the URL, enabling modals and detailed views.

App Router provides `error.tsx` for error boundaries, `loading.tsx` for Suspense fallbacks, `not-found.tsx` for 404 responses, and `template.tsx` for per-route state reset. Use `default.tsx` in parallel routes when no match exists.