nextjs

App Router uses file-based routing in the app directory. Create folders for routes and place page.tsx files inside them; Next.js automatically maps folder structure to URL paths. Nested folders create nested routes, and special files like layout.tsx define shared UI across routes.

Server Components run only on the server, reducing bundle size and enabling direct database access; they're the default in App Router. Client Components run in the browser and handle interactivity. Mark components with 'use client' to make them interactive; keep heavy logic on the server.

In App Router, fetch data directly in Server Components using async/await, or use route handlers for API endpoints. Next.js caches fetch requests by default; use revalidateTag() or revalidatePath() to update stale data. This pattern combines SSR and SSG benefits without client-side waterfalls.

Yes, you can run Pages Router and App Router simultaneously during migration. Gradually move routes from pages/ to app/ directory. App Router coexists with Pages Router, letting you transition incrementally without rebuilding the entire project at once.

Use Next.js Image component for automatic responsive sizing, lazy loading, and format optimization. Import fonts from next/font to self-host them, eliminating external requests. Both reduce Cumulative Layout Shift and improve Core Web Vitals scores.

Define metadata in layout.tsx or page.tsx using the Metadata API; specify title, description, Open Graph tags, and canonical URLs. Next.js generates meta tags and injects them into the HTML head, improving search engine indexing and social sharing.