Web Development7 min read

Next.js

React framework with file-based routing, SSR/SSG/ISR rendering modes, API routes, and edge middleware - optimized for production on Vercel or self-hosted.

Next.jsReactSSRVercelFull-Stack

skill: Next.js category: Web Development tags: [Next.js, React, SSR, Vercel, Full-Stack] readingTime: 7

Next.js is the default choice for React apps that need server rendering, SEO, or a full-stack API layer. For pure SPAs without SEO requirements consider Vite+React. For content-heavy sites consider Astro. For extreme flexibility consider Remix.

Workflow

Bootstrap with App RouterApp Router (Next 13+) uses React Server Components by default, giving zero client JS for server-rendered routes and co-located layouts.
Choose the right rendering per routePicking the wrong mode wastes compute or breaks freshness - static pages don't need a server, dynamic data shouldn't be baked at build time.
Co-locate API logic with Route HandlersRoute Handlers replace the old pages/api pattern; they live next to the UI that uses them and support streaming.
Optimize images and fontsnext/image eliminates layout shift and serves WebP; next/font inlines critical font CSS and eliminates FOUT.
Add middleware for auth and redirectsMiddleware runs at the edge before the page renders - ideal for auth gates, A/B flags, and locale redirects without cold-start latency.

Output Format

Production Next.js project with App Router, TypeScript, Tailwind, and proper rendering modes per route.

my-app/
├── app/
│   ├── layout.tsx          # Root layout (Server Component)
│   ├── page.tsx             # Home (SSG by default)
│   ├── dashboard/
│   │   └── page.tsx         # Dynamic SSR (reads cookies)
│   └── api/
│       └── users/route.ts   # Route Handler
├── components/              # Shared UI
├── lib/                     # DB, auth, utils
└── next.config.js

Examples

Input

Output

Input

Output

Edge Cases & Gotchas

Client/Server boundary mismatch - Using useState or useEffect in a file that Next.js treats as a Server Component throws at build time. Add 'use client'; at the top of files that need browser APIs.
CORS on Route Handlers - Route Handlers don't add CORS headers by default. Add `Access-Control-Allow-Origin` in the Response headers for public APIs.
Environment variable exposure - Variables without NEXT_PUBLIC_ prefix are never sent to the browser. Never put secrets in NEXT_PUBLIC_ vars.
Stale ISR after deploy - ISR pages cached before a deploy may serve old HTML until revalidated. Use on-demand revalidation (`revalidatePath`) from a webhook for critical content.

When to Break These Rules

Use Astro instead of Next.js when the site is >80% static content with minimal interactivity - Astro ships zero JS by default.
Use a dedicated BFF (e.g., Express or Fastify) when API logic is complex enough to warrant its own service with middleware, queues, and independent deploys.

Reference Files

https://nextjs.org/docs/app
https://nextjs.org/docs/app/building-your-application/rendering