The React meta-framework. File-based routing, server rendering, API routes and image optimisation — Next.js turns React into a full production app.
Next.js's signature power: the file system is the router. Drop a file in app/ and it becomes a URL — no route config. Click a file to see the URL it generates and the page it renders.
app/ directory
generates URL
A page.tsx file becomes a routable page automatically.
// app/blog/[slug]/page.tsx → /blog/:slug export default function Post({ params }) { return <h1>Post: {params.slug}</h1> }
A plain React app (CSR) ships an empty page, then JavaScript builds the UI in the browser. Next.js renders HTML on the server (SSR) so the user sees content almost instantly. Press play to race them.
A route.ts file becomes a real HTTP endpoint. No separate server — your frontend and backend live together. Click fetch to simulate calling /api/hello.
// app/api/hello/route.ts export async function GET() { return Response.json({ message: "Hello from the server" }) }
Next's <Image> lazy-loads, resizes and serves modern formats automatically, with a blur placeholder while it loads. Toggle to compare a raw <img> with the optimised version.
~300 KB · full size · loads eagerly
blur placeholder → ~40 KB WebP, lazy