Next.js
Overview
Next.js is the application framework for routing, rendering, data fetching, and deployment-friendly frontend delivery.
Why It Matters
It shapes how pages load, how data moves, and how production issues surface.
Core Concepts
- App Router organizes routes by filesystem structure.
- Server and client boundaries change how code executes.
- Rendering mode affects performance and data freshness.
Mental Models
Ask where the code runs: server, client, build time, or edge.
Best Practices
- Keep server components server-only.
- Add client boundaries only when needed.
- Verify redirects, caching, and loading states.
Common Mistakes
- Pulling browser-only code into server execution.
- Mixing data fetching styles without a reason.
- Ignoring deployment and middleware behavior.
Trade-offs
Server rendering improves first load, but client interactivity still needs careful boundary placement.
Decision Framework
flowchart TD
A[Need a route] --> B{Needs browser APIs?}
B -->|No| C[Server component]
B -->|Yes| D[Client component]
C --> E{Needs cached data?}
E -->|Yes| F[Use server data/cache]
E -->|No| G[Render directly]Examples
export default async function Page() {
const data = await fetch("https://example.com/api", { cache: "no-store" });
return <pre>{JSON.stringify(await data.json(), null, 2)}</pre>;
}Checklists
- Is the component on the correct side of the server/client boundary?
- Are redirects and loading states tested?
- Does the caching strategy match the data?
Senior Engineer Notes
Senior engineers treat Next.js as a system, not just a folder convention. Runtime placement is a design choice.