Presentation

Next.js is an open-source React framework developed by Vercel for building Web applications ranging from static websites to full-stack applications.

It extends React with a routing architecture, server functions, several rendering strategies, metadata management, image and font optimization and an integrated development environment.

The modern architecture is mainly built around App Router, a file-system-based router that notably uses React Server Components, Suspense and Server Functions.

Next.js can combine static content, dynamic rendering, streaming and interactive browser-side components within the same application.

The framework does not require Vercel for deployment: an application can notably run on a Node.js server, inside Docker or be adapted to other platforms.

As of October 3, 2026, Next.js 16.3.8 is the stable Active LTS version. Next.js 15 remains in Maintenance LTS.

Features

App Router and file-based routing

The App Router organizes routes using folders and files inside the app directory.

Files such as page, layout, loading, error and not-found directly define different parts of a route.

Layouts can be nested and preserved during navigation, making it easier to create interfaces that share navigation, a sidebar or a general structure.

Next.js also supports dynamic routes, route groups, parallel routes and route interception.

Server Components and Client Components

Pages and layouts in App Router are Server Components by default.

They can access server-side data, use secrets that are not exposed to the browser and reduce the amount of JavaScript sent to the client.

When a component requires state, events or browser APIs, the "use client" directive creates a Client Component boundary.

Both component types can be combined within the same interface so that client-side JavaScript is reserved for the parts that are genuinely interactive.

Data fetching and streaming

A Server Component can retrieve its data directly from an API, database or another asynchronous source.

Next.js can then progressively send parts of the interface through streaming and Suspense.

The loading file can notably display a temporary state quickly while dynamic content is being prepared.

This architecture avoids having to systematically create an intermediate API simply to transfer data between the server and a React component.

Server Functions and Server Actions

Server Functions are asynchronous functions executed on the server but which can be triggered from the interface.

When they are used for a mutation or form action, they are generally called Server Actions.

They can, for example, create a record, modify data or process a form without manually building a separate endpoint for every operation.

Authentication and authorization checks remain essential, however, because these functions are genuine server entry points.

Cache Components

Next.js 16 introduces Cache Components, an approach where dynamic content runs at request time by default and caching becomes explicit.

The "use cache" directive can be used to cache a function, component or page.

Functions such as cacheLife and cacheTag provide control over cache duration and invalidation.

This architecture can combine a fast prerendered shell with dynamic sections through Partial Pre-Rendering.

Cache Components currently needs to be enabled in the project configuration.

Turbopack

Turbopack is the default bundler in Next.js 16 for development and production builds.

It progressively replaces webpack in new Next.js workflows and uses an architecture designed for incremental compilation.

The development server notably benefits from Fast Refresh and rebuilds only the necessary parts when code changes.

webpack remains available for projects that still depend on specific configurations or plugins.

React Compiler

Next.js provides integration with React Compiler.

The compiler can automatically analyze components and Hooks to reduce the need for certain manual memoization optimizations.

Its activation remains optional in Next.js.

This integration makes it possible to benefit from React Compiler without manually building the entire transformation pipeline.

Images, fonts and metadata

The next/image component notably adds resizing, lazy loading and modern formats adapted to the device.

next/font optimizes fonts and can self-host Google Fonts in order to avoid browser requests to Google's servers.

The Metadata API manages titles, descriptions, favicons and static or dynamic Open Graph images.

These features bring several optimizations into the framework that would otherwise require separate tools.

Route Handlers and backend

Route Handlers can create HTTP endpoints directly inside the App Router.

They can respond to common methods such as GET, POST, PUT, PATCH or DELETE.

Next.js can therefore act as a Backend for Frontend for a React application: database calls, webhooks, authentication or specific APIs can be placed alongside the interface.

For a very large backend or one serving several independent clients, a dedicated service may nevertheless remain preferable.

Proxy

Next.js 16 renamed the former middleware convention to proxy.

The proxy.ts file can intercept a request before rendering in order to perform redirects, rewrites, header processing or certain checks.

The new name is intended to better represent its role as a network boundary and avoid confusion with traditional server-framework middleware.

Next.js recommends using Proxy only when more specific APIs are not sufficient.

App Router and Pages Router

The historical Pages Router remains available and maintained.

It uses the pages directory and older Next.js conventions for routing and data-fetching strategies.

App Router is nevertheless the recommended architecture for new projects and provides access to modern features around Server Components and Server Functions.

An existing codebase therefore does not need to be rewritten immediately simply because it uses Pages Router.

Deployment

Next.js can run on a Node.js server or inside a Docker container with the full set of framework features.

Static export can generate HTML, CSS and JavaScript files deployable on static hosting, but some server features then become unavailable.

The framework can also use adapters for different platforms.

Vercel provides particularly direct integration with Next.js but is not required to use the framework.

Use cases

Build a full-stack React application

Next.js can combine React pages, data access, server mutations and HTTP endpoints in the same project.

This approach suits SaaS applications, customer areas, dashboards and business tools.

Create an editorial website

Server rendering, static generation, metadata and image optimization are well suited to blogs, media sites, documentation and content-driven websites.

Each route can use a different strategy depending on how often its data changes.

Develop an e-commerce site

Server Components can retrieve catalog and product information on the server while Client Components handle cart behavior, filters and interactions.

Server Actions can process certain mutations without multiplying manually created endpoints.

Build a hybrid interface

A page can contain mostly server-rendered content with only a few interactive components sent to the browser.

This separation can reduce client-side JavaScript while preserving a rich user experience.

Create a Backend for Frontend

Route Handlers and Server Functions can group logic required specifically by the Web interface.

They can hide secrets, aggregate several services or transform responses before passing them to the client.

Conclusion

Next.js turns React into a full-stack environment structured around the modern Web.

App Router combines file-based routing, Server Components and progressive rendering, while Server Functions and Route Handlers make it possible to add genuine server-side logic to the same project.

Turbopack, image and font optimization, metadata and caching tools complete this environment with ready-to-use features.

The framework is nevertheless more complex than a fully client-side React application: developers need to understand server/client boundaries, caching strategies and the consequences of the chosen deployment model.

For building complete React applications with server rendering, routing, data access and built-in optimizations, Next.js is currently one of the major frameworks in the React ecosystem.

Points to consider

  • Next.js 16.3.8 is the stable Active LTS version as of October 3, 2026.

  • Next.js 15.5.27 remains in Maintenance LTS. Branches 14 and earlier are no longer among the officially supported versions.

  • canary builds are preview releases. They allow upcoming features to be tested but are not recommended for production traffic.

  • Next.js is free and open source under the MIT license. Using the framework does not require hosting the application on Vercel.

  • App Router is recommended for new projects. Pages Router remains maintained and can continue to be used in existing applications.

  • Server Components run on the server by default in App Router. "use client" should be used when a component genuinely requires state, events or browser APIs.

  • Server Functions must be protected like public endpoints. Authentication, authorization and data validation remain necessary.

  • Cache Components is an opt-in feature. Its caching model differs from the implicit behavior of some previous Next.js versions.

  • middleware.ts is deprecated in Next.js 16 in favor of proxy.ts. Older projects may require migration.

  • Turbopack is now the default bundler, but some projects depending on webpack-specific behavior may still require webpack.

  • The deployment model determines which features are available. A static export cannot provide all the capabilities of a Node.js server.

  • Next.js currently requires Node.js 20.9 or later for development. Requirements may change with future major releases.

  • Security updates should be applied quickly. Vercel recommends keeping production applications on the latest Active LTS or Maintenance LTS release.