nextjs

Next.js App Router uses Route Handlers (route.ts files exporting HTTP method functions like GET, POST) instead of Pages Router API routes — they use standard Web APIs (Request/Response), support streaming, run only on the server, and are the way to build API endpoints when Server Actions aren't appropriate.

Next.js is a React framework that adds file-based routing, server-side rendering, static site generation, API routes, and built-in optimizations — it handles the infrastructure decisions (bundling, compiling, routing) so you can focus on building React components.

Next.js has multiple caching layers — Request Memoization deduplicates identical fetches in a single render, the Data Cache persists fetch results across requests, the Full Route Cache stores rendered HTML/RSC payload at build time, and revalidation (time-based or on-demand) controls when cached data refreshes.

In the App Router, all components are Server Components by default — they render on the server with zero client JavaScript, can directly access backend resources, and pass serializable props to Client Components marked with 'use client' that handle interactivity (state, effects, event handlers).

In the App Router, Server Components are async functions that fetch data directly using fetch() or database queries — parallel fetching with Promise.all avoids waterfalls, request deduplication prevents redundant calls, and client-side fetching uses SWR or React Query for interactive data needs.

Next.js middleware runs before every request at the edge — defined in a single middleware.ts file at the project root, it can redirect, rewrite, set headers/cookies, and return responses, using a limited edge runtime without Node.js APIs like fs or native modules.

Next.js provides three navigation methods — the <Link> component for declarative navigation with automatic prefetching, useRouter() for programmatic navigation in event handlers, and redirect() for server-side redirects in Server Components and actions.

next/image automatically converts images to modern formats (WebP/AVIF), lazy-loads by default, prevents layout shift with required dimensions, and serves responsive sizes — next/font loads Google and local fonts with zero layout shift by hosting font files at build time.

Next.js provides automatic code splitting per route, next/dynamic for lazy-loading heavy components, streaming with Suspense for progressive page loading, Server Components for zero-client-JS rendering, and bundle analysis tools — together these techniques minimize JavaScript sent to the browser.

Next.js supports four rendering strategies — Static (SSG) generates HTML at build time for fastest delivery, Dynamic (SSR) renders per request for fresh data, ISR revalidates static pages on a timer, and Streaming sends HTML progressively with Suspense — the App Router automatically determines the strategy based on your code.

Next.js App Router uses the app/ directory where folder structure defines URL routes — page.tsx makes a route public, layout.tsx wraps child routes with shared UI, loading.tsx and error.tsx provide automatic loading/error states, and dynamic segments like [id] capture URL parameters.

Server Actions are async functions marked with 'use server' that run exclusively on the server — they replace API routes for mutations (form submissions, data updates), support progressive enhancement (forms work without JavaScript), and integrate with React's useActionState and useOptimistic for pending/optimistic UI.