Next.js Glossary

A

App Router

Next.js router (v13) uses file-system routing, supports layouts, nested routing, loading states, and error handling.

B

Build time

Next.js builds applications during build time, transforming code, generating static pages, and preparing assets for deployment.

C

Cache Components

Cache Components feature enables caching at component and function levels using the “use cache” directive. It allows mixing static, cached, and dynamic content within a single route.

Catch-all Segments

Dynamic route segments match multiple URL parts using […]/page.js syntax, capturing remaining segments for features like documentation sites or file browsers.

Client Bundles

Next.js automatically splits JavaScript bundles based on the module graph to reduce initial payload size.

Client Component

React Client Components, used in Next.js, run in the browser and can be server-rendered during initial page generation.

Client-side navigation

Next.js uses client-side navigation with the <Link> component for dynamic page content updates.

Client Cache

Next.js uses an in-memory browser cache to store RSC Payload for visited and prefetched routes, enabling instant client-side navigation. The cache can be invalidated programmatically and its duration configured globally or per-route.

Code Splitting

Next.js automatically performs code splitting based on routes, reducing initial load time by loading only necessary code.

D

Dynamic rendering

Dynamic components are rendered at request time using Request-time APIs.

Dynamic route segments

Dynamic route segments, created by wrapping folder names in square brackets, allow for route creation from dynamic data.

E

Environment Variables

NEXT_PUBLIC_ variables are exposed to the browser in Next.js, while others are server-side.

Error Boundary

React component error handling in Next.js.

F

Font Optimization

next/font optimizes fonts for Next.js, improving performance and eliminating layout shift.

File-system caching

Turbopack feature stores compiler artifacts for faster compile times.

H

Hydration

React attaches event handlers to the DOM during hydration to make server-rendered static HTML interactive.

I

Import Aliases

Custom path mappings and import aliases simplify directory references and improve code readability.

Incremental Static Regeneration (ISR)

ISR updates static content per-page without rebuilding the entire site.

Intercepting Routes

Routing pattern allows loading routes within the current layout, useful for displaying content without context switching.

Image Optimization

Next.js optimizes images on-demand, serving them in modern formats and handling lazy loading and responsive sizing.

L

Layout

Shared UI layouts preserve state and interactivity across pages, defined in layout.js.

Loading UI

Fallback UI displayed during route segment loading, implemented using loading.js and Suspense boundary.

M

Module Graph

Next.js analyzes file dependencies to optimize bundling and code-splitting.

Metadata

Metadata in Next.js includes title, description, and Open Graph images, defined in layout or page files.

Memoization

Next.js automatically memoizes fetch GET requests with the same URL and options across Server Components, layouts, pages, and generateMetadata/generateStaticParams.

N

Not Found

A not-found.js file creates a special component for non-existent routes.

P

Private Folders

Folders prefixed with an underscore are excluded from the routing system for code organization.

Page

Route-specific UI is defined by exporting a React component from a page.js file.

Parallel Routes

Pattern for rendering multiple pages within a layout using named slots.

Partial Prerendering (PPR)

Rendering optimization combines prerendering and dynamic rendering for efficient content delivery.

Prefetching

Next.js automatically prefetches routes linked with the <Link> component for instant navigation.

Prerendering

Prerendering generates HTML and RSC Payload for caching and CDN delivery, used by default for components without Request-time APIs.

Proxy

proxy.js implements server-side logic before request completion.

R

Redirect

Redirects in Next.js can be configured in next.config.js, returned from Proxy, or triggered programmatically.

Request-time APIs

Functions like cookies(), headers(), searchParams, and draftMode() trigger dynamic rendering by accessing request-specific data.

Revalidation

Cached data can be updated time-based or on-demand.

Rewrite

Request path mapping in next.config.js or Proxy for URL rewriting.

Route Groups

Route groups organize routes without affecting URLs, enabling per-group layouts.

Route Handlers

Route Handlers in route.js handle HTTP requests using Web APIs.

Route Segment

URL path segments are defined by folders in the app directory.