Next.js App Router

Next.js 13+ introduced the App Router in the app/ directory alongside the older Pages Router (pages/). The App Router enables React Server Components by default, nested layouts, and co-located data fetching. It's the recommended approach for new Next.js projects. In migration discussions, 'move to the App Router' means restructuring routes from pages/ to app/.

Server Actions are async functions marked with 'use server' that can be called from Client Components but execute on the server. They're ideal for form submissions — no separate API route needed. The browser sends a POST to the function directly. In design discussions: 'use a Server Action' means avoid creating a pages/api/ or app/api/ route for simple mutations.

In Next.js App Router, loading.tsx is a special file that automatically wraps the page in a React Suspense boundary. While the page's Server Component awaits data, the loading UI (a skeleton, spinner, or placeholder) renders immediately. This improves perceived performance. In discussions: 'add a loading.tsx' means implement a streaming skeleton that shows while the real content loads.

Revalidation in Next.js means refreshing cached data after a time interval. next: { revalidate: 3600 } in a fetch call means the data is cached for 1 hour, then regenerated in the background on the next request. This is Incremental Static Regeneration (ISR). In architecture discussions: 'set revalidation' means decide how stale the data can be before Next.js regenerates it.

generateStaticParams is an App Router function that returns an array of parameter values to pre-render at build time. For app/products/[id]/page.tsx, you export generateStaticParams returning [{ id: '1' }, { id: '2' }] and Next.js statically generates those pages. It replaces getStaticPaths from the Pages Router. In discussions: 'add generateStaticParams' means pre-build the most important dynamic pages.