Next.js How It Works

Next.js sits between your code and the user's browser. It takes the React components you write, processes them, and decides how to deliver them to the user. Understanding this process helps you make better decisions when building your app.

The Build and Runtime Process

When you run your Next.js app in production, two stages happen: the build stage and the runtime stage.

Build Stage

Next.js reads all your files, compiles your code, and prepares your pages. Some pages get turned into static HTML files right here. This is called pre-rendering.

Runtime Stage

When a user visits your site, Next.js decides what to send. If the page was pre-built, it sends the HTML file directly. If the page needs fresh data, Next.js runs your code on the server and generates the page at that moment.

Diagram: The Two Stages

YOUR CODE
    ↓
[BUILD STAGE]
Next.js reads files → Compiles → Pre-renders pages
    ↓
[RUNTIME STAGE]
User visits URL → Next.js checks page type
    ↓                         ↓
Static Page               Dynamic Page
Sends pre-built HTML      Runs server code → Sends HTML

Pre-Rendering: The Core Idea

Most frameworks only render pages inside the browser using JavaScript. Next.js renders pages before they reach the browser. This is called pre-rendering. Every page in a Next.js app is pre-rendered by default.

Pre-rendering has two forms: Static Generation and Server-Side Rendering. You choose which one fits each page.

Static Generation (Build Time)

The page is built once when you run the build command. Every user gets the same pre-built file. This is the fastest option and works well for pages where the content rarely changes — like a blog post or a landing page.

Server-Side Rendering (Request Time)

The page is built fresh every time someone visits. This works well for pages that show personalized data — like a user dashboard or a live feed.

Diagram: Static vs Server Rendering

STATIC GENERATION
Build Time → HTML File Created and Saved
User Visits → File Served Instantly (Fast)

SERVER-SIDE RENDERING
User Visits → Server Runs Code → HTML Created → Sent to User
(Slightly slower but always fresh)

Hydration: Making Pages Interactive

After the browser receives the pre-rendered HTML, React takes over. React attaches event listeners and makes the page interactive. This process is called hydration.

Think of the pre-rendered HTML as a photograph of a room. Hydration is when furniture in the photograph becomes real — you can open drawers, turn on lights, and interact with things.

PRE-RENDERED HTML → Browser receives it → Page is visible
         ↓
REACT HYDRATES → Buttons work → Forms respond → Page is interactive

The Next.js Server

Next.js runs a Node.js server. This server handles requests, runs your server-side code, and serves pages. When you deploy to Vercel or another platform, this server runs in the cloud.

You do not need to set up or manage this server manually. Next.js and your hosting platform handle it for you.

How Routing Works

Next.js reads your folder structure and automatically creates URL routes. A file at app/about/page.js becomes the /about URL. A file at app/blog/post/page.js becomes the /blog/post URL.

No router configuration file is needed. The folder names are the routes.

Key Takeaway

Next.js works by pre-rendering your pages either at build time or at request time, then delivering ready-made HTML to the browser. React hydrates that HTML to make it interactive. This combination gives you both speed and interactivity.