Next.js
Next.js is a React meta-framework that supplies everything React leaves out for production apps: routing, server rendering, data fetching, API endpoints, and image/bundle optimization — with sensible defaults. It's the default choice for React apps that need SEO, fast initial loads, or full-stack capabilities.
Built by Vercel, Next.js has shifted with the App Router toward a server-first model: components render on the server by default, shipping less JavaScript to the browser. That inverts the traditional React mental model, which is the main thing to internalize.
TL;DR
- File = route: the
app/directory structure maps directly to URLs. - Components are Server Components by default; opt into client with
'use client'. - Choose a rendering mode per route: SSG, SSR, or ISR.
- Use Server Actions for mutations and Route Handlers for APIs.
- Keep secrets server-side; only
NEXT_PUBLIC_vars reach the browser.
Quick Example
An App Router page is an async Server Component that fetches data inline — no useEffect, no client JS for this view:
App Router vs Pages Router
Use the App Router for new projects; the two coexist but don't mix their mental models.
Core Concepts
- Server vs Client Components — server by default; add
'use client'only for components using hooks, state, event handlers, or browser APIs. - Server Actions — server functions callable from components (
'use server') to mutate data without a separate API route. - Route Handlers — API endpoints in
app/api/.../route.ts. - Middleware — runs before a request completes (auth redirects, headers, rewrites) at the edge.
Rendering modes
💡 Server Components ≠ SSR. Server Components render on the server and send a component payload (no client JS for them); SSR is about generating the HTML for a request. Next.js uses both.
Best Practices
- Stay server-first — add
'use client'only where you truly need interactivity, and push it down the tree. - Fetch data in Server Components, not in client
useEffect. - Use
next/imageandnext/linkfor automatic optimization and prefetching. - Reach for ISR instead of rebuilding the whole site when content changes.
- Co-locate data mutations in Server Actions; validate their inputs server-side.
Performance
Next.js reports Core Web Vitals and optimizes by default (image optimization, automatic code splitting, prefetching next/link routes). Watch for: SSR compute cost per request, deep component trees slowing hydration, and data-fetching waterfalls — fetch in parallel and lean on Server Components to ship less JS. See Web Performance.
Common Mistakes
'use client' on everything
Fetching in useEffect instead of the server
Leaking secrets to the client
FAQ
App Router or Pages Router?
Use the App Router for new projects — it's the future of Next.js, with Server Components, nested layouts, and server actions. The Pages Router still works and coexists, but don't mix the two mental models in new code.
What's the difference between Server Components and SSR?
Server Components render on the server and send a serialized component result with no client JavaScript for those components. SSR generates HTML per request for the initial load. Next.js combines them — Server Components reduce bundle size; SSR/SSG/ISR decide when HTML is produced.
When do I need 'use client'?
Only for components that use state/effects (useState, useEffect), event handlers, or browser APIs. Keep it on small leaf components and let pages and layouts stay server components.
What are Server Actions?
Server-side functions (marked 'use server') you can call directly from components — typically from a form — to mutate data without writing a separate API route. Always validate their inputs, since they're a server entry point.
Where do I keep secrets and env vars?
Server-side. Any variable prefixed NEXT_PUBLIC_ is inlined into the client bundle, so only use that prefix for non-secret values. Everything else stays on the server.
Related Topics
- React — The underlying library
- React Server Components — The model App Router builds on
- SEO for SPAs — Why SSR/SSG matters
- Vercel — Common deployment target
- Data Fetching — Client-side data when you need it