Many code Next JS?
But do they understand how it works…..
Many developers know how to build a Next.js app, but not everyone truly understands what’s happening behind the scenes.
What is Next JS ?
Next.js is a modern web development framework built on top of React and maintained by Vercel. While React focuses mainly on building user interfaces, Next.js extends React by adding powerful features like server side rendering (SSR), file based routing, API routes, and automatic optimization all out of the box.
In simple terms, Next.js solves many limitations that pure React applications used to face, making web apps faster, more scalable, and SEO friendly.
What is bundler ?
Every modern JavaScript framework uses a bundler, a tool that collects all your project’s JavaScript, CSS, and other assets, and compiles them into optimized files for the browser.
Get Thidas Senavirathna’s stories in your inbox
Join Medium for free to get updates from this writer.
Next.js has two main bundlers,
- Webpack — The classic bundler that powered early versions of Next.js.
- Turbopack — The new, high-performance bundler built by Vercel (written in Rust). It’s now the default bundler in the latest versions of Next.js because it’s much faster and more efficient than Webpack.
Think of a bundler as a “factory” that takes all your code and dependencies, processes them, and delivers a clean, optimized package that the browser can understand.
How does Next JS works ?
When you run a Next.js app, it separates your project into two parts,
- Server-side code — Runs on the server using Node.js (or the Edge runtime). This handles data fetching, API requests, and pre-renders HTML before sending it to the browser.
- Client-side code — Runs in the user’s browser. This handles interactivity such as button clicks, animations, and dynamic updates using React.
During the build process, Next.js compiles and bundles these two parts separately — one optimized for the server and one for the browser — but both work together seamlessly to deliver a smooth and fast experience.
What is Server side + Client Side ?
The server generates HTML for each page (using your React components) and sends it to the browser.
/* this code will run on the server and get the api result and give it to the
client component then generate the html pages so this will be run on the server
that's why we call it server side */
import ClientComponent from './ClientComponent';
export default async function Page() {
const res = await fetch('https://api.example.com/products');
const data = await res.json();
return (
<div>
<h1>Products</h1>
<ClientComponent data={data} />
</div>
);
}This makes pages load fast and improves SEO.
The client then takes over loading JavaScript, activating interactivity, and managing updates without reloading the page.
/* once this got the data from server side it will serve this generated html
on the users web browser. that's why we call this client side. */
'use client';
import { useState } from 'react';
export default function ClientComponent({ data }) {
const [count, setCount] = useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>Clicked {count} times</button>
<ul>{data.map(p => <li key={p.id}>{p.name}</li>)}</ul>
</div>
);
}This process is known as hydration.
So even though you only see HTML, CSS, and JS files after building, Next.js internally manages separate server and client builds to optimize both performance and developer experience.
Conclusion,
Next.js isn’t just another React framework it’s a complete ecosystem that bridges the gap between server and client, performance and simplicity.
By handling both server-side rendering and client-side interactivity, it ensures your apps are fast, SEO-friendly, and developer-efficient.
Understanding how the bundler, build process, and rendering pipelines work gives you real control over optimization and debugging.
So next time you run npm run dev or npm run build, you’ll know exactly what’s happening behind the scenes — not just that it works, but how it works.
