What is it?
Next.js is the React framework most production apps reach for. It adds file-based routing, server rendering, server components, server actions, image optimization, and a build system — the things you'd otherwise wire together by hand. The App Router (Next 13+) is the modern API; the Pages Router is legacy you'll still see in older codebases.
Why it matters
Next.js appears in a huge share of React job postings. It's the framework that turns "React app" into "production website" — SEO, performance, and data fetching handled by the framework instead of bolted on. Knowing the App Router model is close to mandatory for frontend roles in 2026.
What to learn
- App Router: the
app/directory,page.tsx,layout.tsx - File conventions:
loading,error,not-found, route groups - Nested layouts and shared UI
- Server components by default, client components on opt-in
- Server actions for mutations without API routes
MetadataAPI for SEO + OG images- Caching: the part that confuses everyone — know
fetchcache + revalidation
Common pitfall
Fighting the caching model. Next's caching is aggressive by default and
genuinely confusing. Before assuming "Next is broken," check whether a
fetch is cached, whether a route is static or dynamic, and whether you
need revalidate or cache: 'no-store'. Most "stale data" bugs are
caching, not bugs.
Resources
Primary (free):
- Next.js docs — App Router · docs
- Next.js — Learn course · docs
- Next.js — Caching · docs
Practice
Build a small blog with the App Router: a list page (server-fetched), a
dynamic [slug] post page, a shared layout with nav, and loading +
not-found files. Add Metadata to each post. Done when posts are
statically generated, the layout persists across navigation, and a bad
slug shows your custom not-found page.
Outcomes
- Scaffold an App Router project with layouts, loading, and error files.
- Decide static vs dynamic rendering per route.
- Use a server action for a mutation instead of an API route.
- Debug a caching issue by reasoning about Next's cache layers.