Next.js
Render every page the right way.
Next.js lets each page pick its rendering strategy independently — static for the marketing site, server-rendered for dashboards, incremental for product catalogues, client-side for interactive widgets. React's best-in-class framework for production web apps.
Static
/ssg
CacheForever (until rebuild)
TTFB28ms
Built 2h ago
Server
/ssr
CacheNone (fresh every time)
TTFB180ms
Incremental
/isr
CacheRevalidated on tag/time
TTFB32ms
Client
/client
CacheNone · always hydrating
TTFB45ms + JS
Same page, four strategies. Pick per route — not per project.
The production fit
Where Next.js earns its place.
Performance-critical sites
Core Web Vitals targets, fast TTFB, strong Lighthouse scores. Next.js + Vercel edge delivery is the benchmark.
Headless + frontend stack
Sanity/Contentful/Strapi backed → Next.js frontend. The canonical headless architecture when you want React's ecosystem.
International content sites
Route-based localisation, middleware for geo-routing, edge caching per region. Multi-market done without plugin hell.
App-like experiences
Dashboards, portals, internal tools, SaaS frontends. Auth flows (Clerk/NextAuth), server components, streaming — production-grade.
Marketing + app hybrid
Static marketing pages + server-rendered logged-in areas on one codebase. Previously required two separate builds; now one.
React expertise already in-house
If your team knows React, Next.js adds the production layer (routing, data fetching, rendering) without a new framework to learn.
App Router · Server Components
The modern Next.js model — server-first, streaming, typed.
Next.js 13+ App Router changed the mental model. Default to Server Components (zero JS sent to client), add 'use client' only where needed, stream responses progressively, fetch data directly in components with native async/await.
Server Components by default
Components render on the server. Zero JS bundle impact. Direct database/API calls inside the component with async/await.
Client Components opt-in
Add 'use client' to any file that needs interactivity (hooks, event handlers, browser APIs). Mixed seamlessly with server components.
File-system routing
app/products/[slug]/page.tsx becomes /products/whatever. Nested layouts, loading states, error boundaries all colocated with the route.
Parallel + intercepted routes
Render multiple routes at once (dashboard with tabs), intercept routes for modals (photo grid → photo modal without navigation).
Server Actions
Form submissions that run server-side code directly — no separate API route, no fetch call. Type-safe mutations in client components.
Streaming + Suspense
Page renders in chunks as data resolves. Header appears immediately, product grid streams in as DB query completes. Feels instant.
Where to deploy
Next.js deployment options — honest comparison.
Vercel
The gold-standard Next.js host — built by the same team
Pros
Zero-config deploy, edge network, preview URLs per branch, fastest ISR
Cons
Cost scales hard on big bandwidth, vendor alignment
Best fit
Most production Next.js projects — until bill hurts
Cloudflare Pages
Strong CDN + cheaper egress at scale
Pros
Generous free tier, excellent edge performance, Workers integration
Cons
Some Next.js features lag Vercel by months
Best fit
High-traffic content sites, cost-sensitive
Netlify
Reliable alternative with strong dev experience
Pros
Mature platform, good edge functions, split testing tools
Cons
Less optimised for Next.js specifics than Vercel
Best fit
Teams already on Netlify, hybrid static stacks
Self-hosted / Docker
Run Next.js wherever you run anything else
Pros
Full control, no vendor tie, predictable cost
Cons
You manage caching, CDN, scaling, monitoring
Best fit
Enterprise with existing infra, compliance-heavy
AWS Amplify / App Runner
If AWS is your mandated cloud
Pros
Integrates with existing AWS services
Cons
More config burden, Next.js edge features limited
Best fit
AWS-native orgs, compliance-heavy
The tradeoffs
When Next.js is the wrong answer.
Small marketing sites (<15 pages)
Astro, Eleventy, or even Webflow ship faster for simple static sites. Next.js adds build complexity you don't need at small scale.
Team has zero React experience
Next.js's learning curve compounds. Vue/Nuxt or SvelteKit may fit better. Learning React + Next.js + deployment together is a lot.
Server components feel confusing
The server/client boundary trips up even experienced React devs initially. If your team's already swimming, piling on more won't help.
You need genuine offline-first behaviour
Next.js is server-rendering-first. PWAs and offline-heavy apps want a different architecture (Remix's client-loader pattern, pure SPA, etc.).
Strict edge-compute compliance rules
Some jurisdictions restrict code running at edge locations. Next.js's edge runtime works around this but it's more infra work.
CMS-led site where editors need visual builder
Next.js is code-first. If your editors want WYSIWYG page building, Webflow or a visual builder on top of headless CMS fits better.
Frequently asked
Next.js questions.
App Router for anything new. Pages Router is stable but feature-frozen — all new framework work targets App. Existing Pages Router projects can stay or migrate page-by-page; the two can coexist in one codebase.
Related
Also in the framework space
Next.js makes sense? We'll scope it properly.
Free 45-minute call — describe the site you're building, the performance needs, the team skills. We'll tell you if Next.js fits, or what does.