Next.js In-Depth

The blank canvas problem React creates, the rendering spectrum from CSR to PPR, and what Next.js actually is under the hood — compiler, router, server, and CDN interface.

Every special file in the app/ directory — page, layout, template, loading, error, not-found, default, forbidden, unauthorized — and exactly what each one does and when to reach for it.

The network boundary in plain terms, what "use client" actually costs, why Server Components are the default, and the five mistakes every engineer makes the first week.

async/await directly in Server Components, fetch() with Next.js cache extensions, loading skeletons with Suspense, and the redirect/notFound control-flow functions.

Slug segments, catch-all routes, async params in Next.js 15, generateStaticParams, and the full suite of client-side navigation hooks including the new useLinkStatus.

Why next/image exists, the four Script loading strategies, the new Form component for prefetched search, and what Link's prefetch prop actually controls.

Building GET/POST/PUT/DELETE handlers with NextRequest and NextResponse, the new proxy.js convention, userAgent() for device detection, and when to use a Route Handler vs a Server Action.

Building a content site end-to-end — layouts, dynamic routes, data fetching, generateMetadata for SEO, static vs dynamic rendering decisions, and what silently breaks when you deploy outside Vercel.

The complete decision flowchart: every API that forces dynamic rendering (cookies, headers, searchParams, noStore, connection), the root layout footgun that opts your entire app out of static, and how to read next build output to verify render mode before you ship.

Sequential vs parallel fetching, unstable_cache and cache(), revalidatePath scope, connection() and unstable_noStore() for opting into dynamic rendering, and eliminating waterfall chains.

How Server Actions are compiled, useActionState (the useFormState replacement), useOptimistic for instant UI, the after() API for post-response side effects, and Zod validation patterns.

JWT vs database sessions, OAuth and credentials providers, auth() in Server Components and Actions, middleware-based route protection, RBAC, and the new forbidden()/unauthorized() auth interrupt system.

Setting up Prisma with the App Router, why new PrismaClient() per request will kill your database at scale, PgBouncer and Neon for serverless pooling, and the full mutation pattern via Server Actions.

The middleware execution model, matcher config, cookies()/headers() write constraints, userAgent() for device routing, draftMode() for CMS preview, and the 1ms performance budget.

The four cache layers, the old fetch()-based model vs the new use cache directive, cacheLife() TTL profiles, cacheTag()/updateTag() for on-demand invalidation, and staleTimes tuning.

generateMetadata vs static metadata, generateViewport(), dynamic OG images with ImageResponse, generateImageMetadata() for multiple images, generateSitemaps() for large catalogs, and draftMode() for CMS preview.

Testing Server Components that call cookies()/headers() outside request context, AsyncLocalStorage-aware test wrappers, mocking the Data Cache layer for deterministic tests, testing optimistic UI race conditions, E2E with Playwright, and the five test patterns that catch real production bugs.

The complete next.config.ts surface, plus the NEXT_PUBLIC_ build-time baking trap (why the same Docker image cannot serve staging and production), runtime environment injection patterns, and the instrumentation.ts startup hook.

Bundle analysis, dynamic() for code splitting, advanced Image configuration with remotePatterns and custom loaders, Script strategy deep dive, optimizePackageImports for barrel files, and memory leak detection.

Sub-path vs domain routing, locale detection via Accept-Language in middleware, next-intl with server-side getTranslations, locale-aware generateStaticParams, and hreflang SEO.

MDX with @next/mdx and custom component mapping, remote MDX from a CMS, the View Transitions API with the viewTransition config, and when MDX is the right choice vs a headless CMS.

A full authenticated dashboard with real data and mutations — Server vs Client Component decisions, optimistic UI, error boundaries, per-page caching strategy, after() for side effects, and a pre-ship checklist.

Vercel zero-config and preview deployments, self-hosting with standalone output, static exports for CDN-only deployments, Docker multi-stage builds, PWA setup, and GitHub Actions CI pipelines.

The serverless connection exhaustion problem with real math (100 functions × pool_size > max_connections), PgBouncer transaction vs session mode, Neon serverless driver, Prisma Accelerate, Supabase pooler, the pgbouncer=true flag, monitoring pg_stat_activity, and a decision matrix by infrastructure type.

The coexistence model, page-by-page migration strategy, getServerSideProps→RSC, getStaticProps→generateStaticParams, API Routes→Route Handlers, next/router→next/navigation API differences, _app/_document→RootLayout providers, Middleware behaviour during partial migration, and the ten pitfalls that block every team mid-migration.

ReadableStream and TransformStream in Route Handlers, the Vercel AI SDK (streamText, useChat, useCompletion), token-by-token streaming to the browser, abort signal propagation for cancelled requests, rate limiting streaming endpoints, streaming error handling constraints, and cost control via token budgets.

The RSC wire format, React Flight serialisation, how the client reconciler processes RSC payloads, React 19 async params/searchParams as Promises, and the React Compiler's automatic memoisation model.

DNS → CDN → edge → origin → streaming response anatomy, cold start cost breakdown, ISR revalidation internals, instrumentation.ts register() lifecycle, and instrumentation-client.js for browser SDK boot.

Request Memoization mechanics, Data Cache tag registry and purge API, use cache directive internals, cacheLife profiles, cacheTag/updateTag, use cache: private and remote, custom cacheHandlers, and cache stampede prevention.

PPR compilation model, how Next.js analyses the Suspense tree, static shell generation at build time, dynamic slot streaming at request time, dynamicIO and use cache as modern PPR primitives, and the PPR vs ISR vs SSR decision matrix.

React 18/19 streaming internals, chunked Transfer-Encoding mechanics, selective hydration priority, hydration mismatch root causes, React.lazy vs dynamic() vs RSC boundary, and preventing flash before hydration.

Server Action compilation, encrypted action IDs, CSRF protection internals, mass assignment via FormData (the Object.fromEntries exploit), after() execution context and error isolation, serverActions bodySizeLimit and allowedOrigins, and the Server Action vs Route Handler architectural decision.

Parallel routes @slot rendering, default.js and the unmatched slot 404 trap, template.js vs layout.js state semantics, intercepting route modal patterns, soft vs hard navigation mechanics, and route group layout inheritance.

The full state matrix, URL state with nuqs, per-request server state with React cache(), cookie-based server state, Zustand with RSC, and the taint API for preventing accidental secret exposure.

Edge runtime constraints and size limits, the Prisma/Edge incompatibility and why Drizzle + Neon serverless is the fix, middleware performance profiling, feature flag architecture with GrowthBook at the edge, A/B testing without layout shift, and geo-routing at the CDN layer.

Next.js multi-zones for independent team deploys, basePath and reverse proxy wiring, shared auth across zones, multi-tenant subdomain routing with per-tenant database isolation, and assetPrefix for tenant CDN origins.

Why Turbopack replaced Webpack, incremental computation model, SWC transforms, turbopack config and filesystem cache, module graph anatomy, diagnosing OOM build failures, and pageExtensions for non-standard project layouts.

LCP critical path, CLS root causes in Next.js, INP and long task elimination, useReportWebVitals instrumentation, webVitalsAttribution for element-level diagnosis, and when synthetic Lighthouse disagrees with your RUM data.

Nonce-based CSP in Middleware and the CDN cache invalidation trap (a cached nonce is not a nonce), SSRF via next/image remotePatterns wildcard misconfiguration, SSRF via Server Actions, secret leakage with server-only and taint API, and rate limiting: edge vs application layer.

Standalone output internals, static export feature graveyard (what silently breaks), WebSocket authentication (HttpOnly cookie on upgrade handshake, token validation on reconnect, secret rotation with 40K live connections), Pusher/Ably vs Partykit vs self-hosted socket layer, and the cold start optimisation playbook.

OpenTelemetry via instrumentation.ts, instrumentation-client.js for browser SDK boot, custom spans across server/edge/client, Sentry integration, useReportWebVitals for CWV shipping, and four production runbooks: TTFB regression, cache miss storm, hydration error, memory leak during rolling deploy.

The most misdiagnosed staleness bug in Next.js: prefetch entry types (full vs partial), staleTimes per entry type, why Server Actions + revalidatePath do not immediately update what the user sees, router.refresh() semantics vs router.push(), and the production debugging workflow for "I mutated data and the UI is stale."

The complete error hierarchy: segment vs page vs root error boundaries, global-error.tsx for root layout crashes, the digest prop for server-side error correlation, how errors propagate through nested RSC trees, Suspense + error boundary interaction, and the four error categories (validation, not-found, auth, unexpected) with the right handling pattern for each.