Next.js: the React framework that renders on the server by default

React stops at display. That leaves how pages are routed, where the HTML gets built, how data is loaded, and what actually ships to the browser.

Next.js answers those four questions at once, by imposing conventions rather than offering options.

Definition

Next.js is a framework built on React. The folder tree defines the URLs, every page is rendered on the server before being sent to the browser, and the same project hosts the routes that serve the data.

// app/invoices/[id]/page.jsx
export default async function Page({ params }) {
  const { id } = await params;
  const invoice = await readInvoice(id);

  return (
    <main>
      <h1>Invoice {invoice.id}</h1>
      <p>{invoice.amount} euros</p>
    </main>
  );
}

The folder sets the address, the square brackets declare a variable segment, and the component may be async. That last property is the real break: the data is read during rendering, on the server, before a single line reaches the browser.

Server by default, client on request

In the App Router a component is a server component unless stated otherwise. It is never sent to the browser, which lets it read a database or a secret safely, but forbids it any state and any event listener.

"use client";

import { useState } from "react";

export default function Filter() {
  const [text, setText] = useState("");
  return <input value={text} onChange={(event) => setText(event.target.value)} />;
}

What the framework adds on top

These five lines explain the framework's adoption: each one matches a piece of work most teams used to carry out separately, and often twice.

Frequently asked questions

Both still exist and can live in the same project, which makes migration gradual. New features now land on the App Router, and server components are its reason for being. A new project has no reason left to start on the older router.

It depends on the pages. A page whose content never changes can be exported as static files and served by any host. As soon as a page reads data on every request, an environment able to run Node.js becomes necessary.

For three fixed pages it is a great deal of machinery. The tipping point comes with data to load, pages to generate from content, or a serious search visibility requirement, since complete HTML then leaves with the very first response. Below that, an ordinary static site stays easier to maintain.