nextjs-framework

Next.js App Router structure relies on route groups, dynamic routes, and parallel routes to organize pages and layouts. You configure per-route static or dynamic rendering by setting appropriate data fetching and caching behaviors within each route segment.

Next.js server and client component boundaries separate data fetching from interactivity. You convert heavy client code to server components by default, only marking client components where state, effects, or browser APIs are strictly required.

Next.js fetch caching and revalidation uses route segment config and fetch options. You apply per-route caching, revalidation tagging, and streaming strategies to reduce Time to First Byte and ensure data freshness across API handlers.

Migrating a Next.js Pages Router app to the App Router involves mapping pages to app directory layouts, converting data fetching to server components, and updating middleware matchers to align with new routing conventions.

Next.js middleware supports Edge runtime execution and requires specific matchers to filter requests. You select between Node.js and Edge runtimes in next.config to tune image, font optimization, and deployment outputs for Vercel, standalone, or Docker.

Next.js App Router builds fail when server components attempt to use client-only APIs or client components perform direct database access. You diagnose rendering and performance issues by reviewing component boundaries and ensuring correct server/client separation.