Next.js

Quick Verdict

When to use it: You're building a React application and want one framework for routing, rendering, API, and deployment.

When not to: Pure SPA with no SSR needs (use Vite), non-React stack, or strong platform-independence requirements.

Best For

• Full-stack React applications — API routes, server actions, middleware, static generation, and SSR in one framework
• AI-assisted development — the most heavily represented React framework in LLM training data; Claude and Cursor generate correct App Router code consistently
• SEO-critical products — server-side rendering and static generation give full control over what search engines index
• Teams of any size — conventions and file-based routing reduce architectural decisions

Avoid If

• Pure SPA with no server-side requirements — Vite + React Router is simpler and faster to configure
• Non-React team — Nuxt (Vue) or SvelteKit (Svelte) are the alternatives
• You need platform independence from Vercel — Next.js runs elsewhere but some edge features need adapters

Why People Choose It

Next.js won the React framework war by solving deployment. Before Next.js, building a production React app meant assembling webpack configs, setting up SSR pipelines, and managing custom infrastructure. Next.js made it npx create-next-app followed by git push.

The App Router (stable since 13.4) was a paradigm shift: React Server Components by default, nested layouts, streaming, and a mental model where the server is the starting point. By 2026 the patterns are well-understood and AI tools generate correct App Router code reliably.

Hidden Costs

Next.js itself is free. The cost appears when you deploy:

• Vercel Pro: $20/month — needed for team features, higher build minutes, and 60s function timeout
• Platform coupling: Some Next.js features (ISR, image optimization at scale) work best on Vercel. Moving to other platforms requires adapters and testing.
• Major version upgrades: Next.js ships breaking changes roughly annually. Budget time for upgrades.

Correct vs Cargo-Culted Patterns

Wrong — API call from server component:

// ❌ Don't make HTTP requests to your own API from server components
const data = await fetch('/api/users')

Right — call functions directly:

// ✅ Call the function directly — no HTTP overhead
import { getUsers } from '@/lib/db/users'
const data = await getUsers()

Wrong — 'use client' everywhere:

// ❌ Adding 'use client' to components that don't need it
'use client'
export function UserProfile({ user }: { user: User }) {
  return <div>{user.name}</div>  // no hooks, no interactivity needed
}

Right — server component by default:

// ✅ No directive needed — it's a server component
export function UserProfile({ user }: { user: User }) {
  return <div>{user.name}</div>
}

AI Coding Notes

Always tell AI tools which version and router you're using:

• "Next.js 15, App Router, TypeScript" — this is critical. Many AI examples are Pages Router.
• "Server Components by default, 'use client' only when needed"
• "Server Actions for mutations, not API routes for internal calls"

AI tends to over-use 'use client' and under-use Server Actions. Correct these patterns.

Common AI Mistakes

1. Pages Router patterns in App Router projects — getServerSideProps, getStaticProps don't exist in App Router
2. 'use client' on everything — only add it when you need hooks or event handlers
3. Fetching from own API routes in server components — call functions directly, skip the HTTP request
4. Ignoring caching — Next.js caches aggressively by default. Missing revalidatePath() or no-store on dynamic data causes stale pages
5. Large client bundles — AI adds heavy client-side libraries without checking if they could be server-side

Start With / Grow Into / Avoid Until Needed

Start with Next.js for any React project that needs server rendering, routing, or API endpoints.

Grow into advanced features: Parallel Routes, Intercepting Routes, PPR (Partial Prerendering), edge middleware — add as requirements become clear.

Avoid until needed: Custom Server setup, multi-zone deployments, the instrumentation.ts API — these exist for specific enterprise use cases.

Migration Implications

Moving off Next.js is moderate effort:

• Routes and page structure need to be reimplemented
• Server-side data fetching patterns change per framework
• Build and deployment pipeline needs reconfiguration

Most teams never migrate off Next.js — the ecosystem network effects are strong.

Alternatives

• Remix — simpler mental model for data loading, better web standards adherence, less AI codegen support. See Next.js vs Remix.