NextNotes — a Next.js cheat sheet
This is a companion to ReactNotes. ReactNotes covers plain React with Vite and client-side routing (react-router-dom). Next.js is a different animal: it's a full framework with its own server, its own router, and its own build pipeline. Everything below is a runnable example of one Next.js feature — click a topic to read the explanation, see the code, and try it live.
Folders and files under app/ become URL routes automatically.
Every component is a Server Component unless it opts into "use client".
Render fresh HTML on every request, on the server.
Render once at build time and serve the same HTML to everyone.
[slug] folders match many URLs with one file.
Backend endpoints live right next to your pages in app/api.
loading.tsx and error.tsx give every route free UX states.
Server Actions + cookies + a proxy (middleware) guard a page.
Images, fonts, metadata, streaming, and more.
Next.js vs plain React (Vite) vs other frameworks.