Next.js Glossary

A

App Router

The Next.js router introduced in version 13, built on top of React Server Components. It uses file-system based routing and supports layouts, nested routing, loading states, error handling, and more. Learn more in the App Router documentation.

B

Build time

The stage when your application is being compiled. During build time, Next.js transforms your code into optimized files for production, generates static pages, and prepares assets for deployment. See the next build CLI reference.

C

Cache Components

A feature that enables component and function-level caching using the "use cache" directive. Cache Components allows you to mix static, cached, and dynamic content within a single route by prerendering a static HTML shell that's served immediately, while dynamic content streams in when ready. Configure cache duration with cacheLife(), tag cached data with cacheTag(), and invalidate on-demand with updateTag(). Learn more in the Cache Components guide.

Catch-all Segments

Dynamic route segments that can match multiple URL parts using the [...folder]/page.js syntax. These segments capture all remaining URL segments and are useful for implementing features like documentation sites or file browsers. Learn more in Dynamic Route Segments.

Client Bundles

JavaScript bundles sent to the browser. Next.js splits these automatically based on the module graph to reduce initial payload size and load only the necessary code for each page.

Client Component

A React component that runs in the browser. In Next.js, Client Components can also be rendered on the server during initial page generation. They can use state, effects, event handlers, and browser APIs, and are marked with the "use client" directive at the top of a file. Learn more in Server and Client Components.

Client-side navigation

A navigation technique where the page content updates dynamically without a full page reload. Next.js uses client-side navigation with the <Link> component, keeping shared layouts interactive and preserving browser state. Learn more in Linking and Navigating.

Code Splitting

The process of dividing your application into smaller JavaScript chunks based on routes. Instead of loading all code upfront, only the code needed for the current route is loaded, reducing initial load time. Next.js automatically performs code splitting based on routes. Learn more in the Package Bundling guide.

D

Dynamic APIs

Functions that access request-specific data, causing a component to opt into dynamic rendering. These include:

• cookies() - Access request cookies
• headers() - Access request headers
• searchParams - Access URL query parameters
• draftMode() - Enable or check draft mode

Dynamic rendering

When a component is rendered at request time rather than build time. A component becomes dynamic when it uses Dynamic APIs.

Dynamic route segments

Route segments that are generated from data at request time. Created by wrapping a folder name in square brackets (e.g., [slug]), they allow you to create routes from dynamic data like blog posts or product pages. Learn more in Dynamic Route Segments.

E

Environment Variables

Configuration values accessible at build time or request time. In Next.js, variables prefixed with NEXT_PUBLIC_ are exposed to the browser, while others are only available server-side. Learn more in Environment Variables.

Error Boundary

A React component that catches JavaScript errors in its child component tree and displays a fallback UI. In Next.js, create an error.js file to automatically wrap a route segment in an error boundary. Learn more in Error Handling.

F

Font Optimization

Automatic font optimization using next/font. Next.js self-hosts fonts, eliminates layout shift, and applies best practices for performance. Works with Google Fonts and local font files. Learn more in Fonts.

File-system caching

A Turbopack feature that stores compiler artifacts on disk between runs, reducing work across next dev or next build commands for significantly faster compile times. Learn more in Turbopack FileSystem Caching.

H

Hydration

React's process of attaching event handlers to the DOM to make server-rendered static HTML interactive. During hydration, React reconciles the server-rendered markup with the client-side JavaScript. Learn more in Server and Client Components.

I

Import Aliases

Custom path mappings that provide shorthand references for frequently used directories. Import aliases reduce the complexity of relative imports and make code more readable and maintainable. Learn more in Absolute Imports and Module Path Aliases.

Incremental Static Regeneration (ISR)

A technique that allows you to update static content without rebuilding the entire site. ISR enables you to use static generation on a per-page basis while revalidating pages in the background as traffic comes in. Learn more in the ISR guide.

Good to know: In Next.js, ISR is also known as Revalidation.

Intercepting Routes

A routing pattern that allows loading a route from another part of your application within the current layout. Useful for displaying content (like modals) without the user switching context, while keeping the URL shareable. Learn more in Intercepting Routes.

Image Optimization

Automatic image optimization using the <Image> component. Next.js optimizes images on-demand, serves them in modern formats like WebP, and automatically handles lazy loading and responsive sizing. Learn more in Images.

L

Layout

UI that is shared between multiple pages. Layouts preserve state, remain interactive, and do not re-render on navigation. Defined by exporting a React component from a layout.js file. Learn more in Layouts and Pages.

Loading UI

Fallback UI shown while a route segment is loading. Created by adding a loading.js file to a folder, which automatically wraps the page in a Suspense boundary. Learn more in Loading UI.

M

Module Graph

A graph of file dependencies in your app. Each file (module) is a node, and import/export relationships form the edges. Next.js analyzes this graph to determine optimal bundling and code-splitting strategies. Learn more in Server and Client Components.

Metadata

Information about a page used by browsers and search engines, such as title, description, and Open Graph images. In Next.js, define metadata using the metadata export or generateMetadata function in layout or page files. Learn more in Metadata and OG Images.

Memoization

Caching the return value of a function so that calling the same function multiple times during a render pass (request) only executes it once. In Next.js, fetch requests with the same URL and options are automatically memoized. Learn more about React Cache.

N

Not Found

A special component shown when a route doesn't exist or when the notFound() function is called. Created by adding a not-found.js file to your app directory. Learn more in Error Handling.

P

Private Folders

Folders prefixed with an underscore (e.g., _components) that are excluded from the routing system. These folders are used for code organization and shared utilities without creating accessible routes. Learn more in Private Folders.

Page

UI that is unique to a route. Defined by exporting a React component from a page.js file within the app directory. Learn more in Layouts and Pages.

Parallel Routes

A pattern that allows simultaneously or conditionally rendering multiple pages within the same layout. Created using named slots with the @folder convention, useful for dashboards, modals, and complex layouts. Learn more in Parallel Routes.

Partial Prerendering (PPR)

A rendering optimization that combines static and dynamic rendering in a single route. The static shell is served immediately while dynamic content streams in when ready, providing the best of both rendering strategies. Learn more in Cache Components.

Prefetching

Loading a route in the background before the user navigates to it. Next.js automatically prefetches routes linked with the <Link> component when they enter the viewport, making navigation feel instant. Learn more in the Prefetching guide.

Prerendering

Generating HTML for a page ahead of time, either at build time (static rendering) or in the background (revalidation). The pre-rendered HTML is served immediately, then hydrated on the client.

Proxy

A file (proxy.js) that runs code on the server before request is completed. Used to implement server-side logic like logging, redirects, and rewrites. Formerly known as Middleware. Learn more in the Proxy guide.

R

Redirect

Sending users from one URL to another. In Next.js, redirects can be configured in next.config.js, returned from Proxy, or triggered programmatically with the redirect() function. Learn more in Redirecting.

Request time

The time when a user makes a request to your application. At request time, dynamic routes are rendered, cookies and headers are accessible, and request-specific data can be used.

Revalidation

The process of updating cached data. Can be time-based (using cacheLife() to set cache duration) or on-demand (using cacheTag() to tag data, then updateTag() to invalidate). Learn more in Caching and Revalidating.

Rewrite

Mapping an incoming request path to a different destination path without changing the URL in the browser. Configured in next.config.js or returned from Proxy. Useful for proxying to external services or legacy URLs.

Route Groups

A way to organize routes without affecting the URL structure. Created by wrapping a folder name in parentheses (e.g., (marketing)), route groups help organize related routes and enable per-group layouts. Learn more in Route Groups.

Route Handler

A function that handles HTTP requests for a specific route, defined in a route.js file. Route Handlers use the Web Request and Response APIs and can handle GET, POST, PUT, PATCH, DELETE, HEAD, and OPTIONS methods. Learn more in Route Handlers.

Route Segment

A part of the URL path (between two slashes) defined by a folder in the app directory. Each folder represents a segment in the URL structure. Learn more in Project Structure.

RSC Payload

The React Server Component Payload—a compact binary representation of the rendered React Server Components tree. Contains the rendered result of Server Components, placeholders for Client Components, and props passed between them. Learn more in Server and Client Components.

S

Server Component

The default component type in the App Router. Server Components render on the server, can fetch data directly, and don't add to the client JavaScript bundle. They cannot use state or browser APIs. Learn more in Server and Client Components.

Server Action

A Server Function that is passed to a Client Component as a prop or bound to a form action. Server Actions are commonly used for form submissions and data mutations. Learn more in Server Actions and Mutations.

Server Function

An asynchronous function that runs on the server, marked with the "use server" directive. Server Functions can be invoked from Client Components. When passed as a prop to a Client Component or bound to a form action, they are called Server Actions. Learn more in React Server Functions.

Static Export

A deployment mode that generates a fully static site with HTML, CSS, and JavaScript files. Enabled by setting output: 'export' in next.config.js. Static exports can be hosted on any static file server without a Node.js server. Learn more in Static Exports.

Static rendering

When a component is rendered at build time or in the background during revalidation. The result is cached and can be served from a CDN. Static rendering is the default for components that don't use Dynamic APIs.

Static Assets

Files such as images, fonts, videos, and other media that are served directly without processing. Static assets are typically stored in the public directory and referenced by their relative paths. Learn more in Static Assets.

Static Shell

The pre-rendered HTML structure of a page that's served immediately to the browser. With Partial Prerendering, the static shell includes all statically renderable content plus Suspense boundary fallbacks for dynamic content that streams in later.

Streaming

A technique that allows the server to send parts of a page to the client as they become ready, rather than waiting for the entire page to render. Enabled automatically with loading.js or manual <Suspense> boundaries. Learn more in Linking and Navigating - Streaming.

Suspense boundary

A React <Suspense> component that wraps async content and displays fallback UI while it loads. In Next.js, Suspense boundaries define where the static shell ends and streaming begins, enabling Partial Prerendering.

T

Turbopack

A fast, Rust-based bundler built for Next.js. Turbopack is the default bundler for next dev and available for next build. It provides significantly faster compilation times compared to Webpack. Learn more in Turbopack.

Tree Shaking

The process of removing unused code from your JavaScript bundles during the build process. Next.js automatically tree-shakes your code to reduce bundle sizes. Learn more in the Package Bundling guide.

U

"use cache" Directive

A directive that marks a component or function as cacheable. It can be placed at the top of a file to indicate that all exports in the file are cacheable, or inline at the top of a function or component to mark that specific scope as cacheable. Learn more in the "use cache" reference.

"use client" Directive

A special React directive that marks the boundary between server and client code. It must be placed at the top of a file, before any imports or other code. It indicates that React Components, helper functions, variable declarations, and all imported dependencies should be included in the client bundle. Learn more in the "use client" reference.

"use server" Directive

A directive that marks a function as a Server Function that can be called from client-side code. It can be placed at the top of a file to indicate that all exports in the file are Server Functions, or inline at the top of a function to mark that specific function. Learn more in the "use server" reference.