Next.js

What is Next.js and what does it do?

Next.js is a React framework for building web applications that span the server and the browser. It supplies conventions for routes, layouts, rendering, data access, and delivery so those concerns can live in one navigable project instead of a collection of unrelated tools.

In the App Router, folders describe URL segments and special files describe pages, layouts, loading states, and errors. React remains responsible for the interface model, while Next.js provides the application structure and the execution boundaries around it.

A request through the App Router

A page request follows a route-shaped path:

1. The URL selects matching route segments.
2. Shared layouts wrap the page for those segments.
3. Server Components can obtain data and produce non-interactive UI.
4. Client Components activate the parts that need state, events, or browser APIs.
5. The composed result reaches the browser.

Nested layouts allow shared interface regions to remain close to the routes that use them. Loading and error boundaries can also be placed at the level where their meaning is clear.

Server and client components have different jobs

• Server Components can keep server-only data access and non-interactive rendering away from the client bundle.
• Client Components are required where local state, event handlers, effects, or browser APIs begin.
• The boundary must carry serializable values from server-rendered work into client components.
• Composition keeps the interactive boundary small without forcing an entire route onto one side.

This distinction is architectural, not cosmetic. Marking a component for the client changes where it executes and what code the browser must receive.

Conventions that become architecture

Next.js reduces setup decisions, but it does not remove application design. Cache behavior, authorization, validation, database access, observability, and deployment still need explicit policies. File conventions also influence ownership, so a route tree should reflect the product rather than become a place for unrelated utilities.

The framework is useful when routing, server rendering, data work, and client interaction benefit from a shared model. A small static site or an API with no React interface may need a narrower tool.