Next.js: The React Framework (App Router)

Next.js is a framework built on React. React renders UI; Next.js adds routing, server rendering, data fetching, caching, and a build system.

In the App Router, every component is a Server Component by default. Adding 'use client' at the top of a file makes it, and everything it imports, a Client Component.

Folders inside app/ define URL segments. A page.tsx makes a segment reachable; a layout.tsx wraps it and every child segment.

A folder named in square brackets ([slug]) matches any value in that URL segment and passes it to the page as params.

<Link> navigates on the client without a full page reload and prefetches the target route. useRouter() navigates from code.

A Server Component can be async and await data directly: from a database, an internal function, or fetch.

loading.tsx shows instant fallback UI while a route's data loads. <Suspense> does the same for any part of a page, and the server streams each part as it's ready.

error.tsx catches errors thrown while rendering a segment and shows fallback UI. not-found.tsx renders when notFound() is called or no route matches.

A Server Action is an async function marked 'use server' that runs on the server but can be called from a form or a Client Component, like a built-in API endpoint.

With cacheComponents enabled, 'use cache' caches the result of a function or component. cacheLife sets how long; cacheTag labels it so it can be refreshed on demand.

A route is static (rendered at build time) unless it reads request data or uncached data, which makes it dynamic (rendered per request). generateStaticParams prerenders dynamic routes; output: 'export' produces a plain static site.

A route.ts file exports functions named after HTTP methods (GET, POST, …) and turns a segment into an API endpoint using the Web Request and Response APIs.

redirect() sends the user elsewhere during rendering or in a Server Action. proxy.ts (called middleware.ts before Next.js 16) runs before a request reaches a route and can redirect, rewrite, or set headers.

A page or layout exports a metadata object, or an async generateMetadata function, to set the <title>, description, Open Graph tags, and more.

next/image resizes, lazy-loads, and serves modern image formats automatically. next/font self-hosts fonts at build time with no layout shift.