The Glossary of Next.js

Core Concepts

Framework (vs. Library) — React is a library for building UI; Next.js is a framework built on top of it, meaning it makes opinionated decisions about routing, data fetching, and build output so developers don't have to assemble those pieces themselves.

App Router — The routing system introduced in Next.js 13, built on React Server Components and nested layouts, organized around a app/ directory where folder structure maps directly to URL structure.

Pages Router — The original Next.js routing system, built around a pages/ directory where each file automatically becomes a route; still supported, but the App Router is now the default for new projects.

File-System Routing — Next.js's foundational idea: the folder and file structure of a project is the route structure, with no separate routing configuration file to maintain.

page.js / page.tsx — The special file inside an App Router folder that makes that route segment publicly accessible and defines the UI rendered for it.

layout.js / layout.tsx — A special file that defines shared UI wrapping a route segment and all of its children, preserving state and avoiding re-renders across navigations within it.

Root Layout — The top-level, mandatory layout.js in the app/ directory that wraps the entire application and must contain the <html> and <body> tags.

Nested Routing — The App Router's default behavior of composing layouts from the root down to the leaf page, so each folder can add its own layout that wraps everything beneath it.

Route Segment — A single portion of a URL path, corresponding to a single folder in the app/ directory; a URL like /blog/post is made up of two route segments.

Rendering Strategies

SSR (Server-Side Rendering) — Generating a page's HTML on the server for every incoming request, ensuring content is always fresh and improving initial load performance and SEO over pure client rendering.

SSG (Static Site Generation) — Generating a page's HTML once at build time, then serving that same static file to every visitor — the fastest rendering strategy, ideal for content that doesn't change per request.

ISR (Incremental Static Regeneration) — A hybrid strategy that serves a statically generated page but regenerates it in the background after a specified time interval, combining static speed with periodically fresh content.

CSR (Client-Side Rendering) — Rendering that happens entirely in the browser after JavaScript loads, the default behavior of a plain React app and still used within Next.js for interactive, client-only pieces.

Server Components (RSC) — The default component type in the App Router: components that render exclusively on the server, never ship their JavaScript to the browser, and can access server-only resources like databases directly.

Client Components — Components explicitly marked with a "use client" directive at the top of the file, which run in the browser as usual and are required for interactivity, state, and browser-only APIs.

"use client" — The directive that marks the boundary between server and client code in the App Router; everything imported below it in the component tree is also treated as client code.

Hydration — The process of attaching interactivity to server-rendered HTML once it reaches the browser, turning static markup produced by SSR or SSG into a fully interactive React application.

generateStaticParams — A function used in dynamic route segments to tell Next.js, at build time, which specific paths should be pre-rendered statically, replacing the Pages Router's getStaticPaths.

Data Fetching

getStaticProps — A Pages Router function that fetches data at build time for a page using SSG, running only on the server and never shipped to the client bundle.

getServerSideProps — A Pages Router function that fetches data on every request for a page using SSR, running exclusively server-side before the page is sent to the browser.

getStaticPaths — A Pages Router function used alongside getStaticProps on dynamic routes to specify which paths should be statically generated at build time.

Async Server Components — The App Router's replacement for the old data-fetching functions: Server Components can simply be declared async and await data directly inside the component body.

Extended fetch — Next.js's augmented version of the native fetch API, extended with a caching and revalidation configuration object so individual requests can opt into static, dynamic, or time-based revalidation behavior.

Route Handlers — Files named route.js inside the app/ directory that define API endpoints using standard Web Request/Response objects, the App Router's replacement for the Pages Router's pages/api.

Server Actions — Asynchronous functions marked with a "use server" directive that can be called directly from Client Components (often from a form submission) to mutate data on the server without manually building an API route.

"use server" — The directive that marks a function as a Server Action, allowing it to be safely invoked from client-side code while its actual execution stays on the server.

Streaming — Sending a page's HTML to the browser in pieces as it becomes ready, rather than waiting for all data to resolve first, so users see and can interact with parts of the page sooner.

Routing Features

Dynamic Routes — Route segments named with square brackets, like [id], that match a range of URL values and expose the matched value as a parameter to the page.

Catch-All Routes — Dynamic segments written as [...slug] that match any number of subsequent path segments, useful for routes with a variable, unknown-in-advance depth.

Optional Catch-All Routes — A variant written as [[...slug]] that behaves like a catch-all route but also matches the parent route itself, when no additional segments are present.

Route Groups — Folders wrapped in parentheses, like (marketing), that organize routes or apply a shared layout without affecting the actual URL path.

Parallel Routes — A convention using named @slot folders that lets multiple pages render simultaneously within the same layout, each independently navigable — commonly used for dashboards with multiple panes.

Intercepting Routes — A convention (using (.), (..), or (...) prefixes) that lets a route load a different page in place of the current one while preserving the URL, commonly used for modals that still deep-link correctly.

Middleware — Code defined in a middleware.js file at the project root that runs before a request completes, able to rewrite, redirect, or modify requests and responses across matched routes.

Loading UI (loading.js) — A special file that automatically wraps a route segment in a React Suspense boundary, showing instant loading state while the segment's data resolves.

Error Boundaries (error.js) — A special file that automatically wraps a route segment in a React error boundary, rendering a fallback UI if anything in that segment throws during rendering.

not-found.js — A special file rendered automatically when a route segment calls the notFound() function or when no matching route is found, replacing the Pages Router's custom 404 page pattern.

useRouter — A hook that gives programmatic access to Next.js's router, letting components navigate, refresh, or inspect the current route imperatively rather than only through <Link>.

<Link> — Next.js's built-in component for client-side navigation between routes, which automatically prefetches linked pages in the background for near-instant transitions.

Optimization & Built-in Components

next/image — A drop-in replacement for the HTML <img> tag that automatically optimizes, resizes, lazy-loads, and serves images in modern formats to improve performance and Core Web Vitals.

next/font — A module that self-hosts and optimizes fonts (including Google Fonts) at build time, eliminating extra network requests and layout shift caused by external font loading.

next/script — A component for loading third-party scripts with fine-grained control over loading strategy (beforeInteractive, afterInteractive, lazyOnload), preventing render-blocking scripts from hurting performance.

Code Splitting — Next.js's automatic behavior of breaking the JavaScript bundle into smaller chunks per route, so users only download the code needed for the page they're visiting.

next/dynamic — A function for dynamically importing components, deferring their loading (and optionally disabling server rendering for them) until they're actually needed.

Metadata API — A configuration system (via an exported metadata object or generateMetadata function) for defining a page's title, description, Open Graph tags, and other <head> content in a type-safe way.

Core Web Vitals — Google's set of user-experience performance metrics (Largest Contentful Paint, Interaction to Next Paint, Cumulative Layout Shift) that Next.js's rendering and optimization features are largely designed to improve.

Ecosystem & Tooling

Vercel — The company that created and maintains Next.js, and the cloud platform most tightly integrated with it for zero-configuration deployment, edge functions, and preview environments.

Turbopack — A Rust-based bundler built by the Vercel team as the intended successor to Webpack within Next.js, designed for significantly faster local development builds and updates.

Edge Runtime — A lightweight JavaScript runtime (as opposed to the full Node.js runtime) that Middleware and certain routes can opt into, running closer to users on distributed edge servers for lower latency.

Static Export — A build mode (output: 'export') that produces a fully static set of HTML/CSS/JS files with no Node.js server required, at the cost of losing SSR, ISR, and other server-dependent features.

next.config.js — The project's central configuration file, used to customize build behavior, redirects, rewrites, image domains, environment variables, and other framework-level settings.

Monorepo Support (Turborepo) — Vercel's build system for managing multiple Next.js apps and shared packages within a single repository, with intelligent caching to avoid rebuilding unaffected projects.

create-next-app — The official command-line tool for scaffolding a new Next.js project with a working configuration, sensible defaults, and optional starter templates.

Taken together, this glossary traces Next.js's evolution from "React with routing and SSR bolted on" into something closer to a full-stack application platform: getStaticProps and getServerSideProps gave way to async Server Components that simply await their own data; API routes gave way to Route Handlers and Server Actions that blur the line between client and server code entirely; and Webpack is, gradually, giving way to Turbopack. Each term here marks a point where the framework absorbed a problem developers used to solve themselves — data fetching, caching, image optimization, bundling — which is, in miniature, the same story told by The Glossary of React one layer down the stack.

*written with Claude Sonnet 5