What is Next.js?

What is Next.js?

Next.js is a production-grade React meta-framework developed and maintained by Vercel. "Meta-framework" means it sits on top of React (the UI library) and adds the production concerns React itself doesn't ship: routing, server-side rendering, build optimization, image handling, font loading, API routes, deployment integration. As of 2026, Next.js is the de facto default for building serious React applications — chosen by Vercel itself, OpenAI, Notion, TikTok, Twitch, GitHub Copilot, and the Stripe Dashboard.

The current major version line is Next.js 14/15+ (2024-2026), built around the App Router (the new routing system that integrates React Server Components) and the Turbopack dev server. The earlier Pages Router (Next.js 12 and below) is still supported for legacy projects but no new development should target it.

The hybrid rendering model

Next.js's killer feature is mixing rendering strategies per route within a single application. Pick the right rendering mode for each page:

SSR (Server-Side Rendering)

Page is rendered on the server for each request. Best for personalized content (logged-in dashboards) or pages where the data changes per visit. Increases TTFB but ensures fresh content.

SSG (Static Site Generation)

Page is rendered at build time and served as a static file. Fastest possible TTFB, scales to billions of requests via CDN. Best for marketing pages, blogs, docs. Requires a rebuild to update.

ISR (Incremental Static Regeneration)

Hybrid: pages are static but Next regenerates them in the background after a configurable interval (e.g., "every 60 seconds"). Best for content that changes occasionally (product pages, news articles, listings). Combines SSG speed with SSR freshness.

Streaming SSR with React Server Components (RSC)

The App Router's modern default. Server-rendered HTML streams to the client as it becomes ready, with selective client-side hydration for interactive components. Best for complex data-fetching apps where some sections take longer than others.

Static-only client-side rendering (CSR)

Pre-rendered shell + client-side data fetching. Used for highly interactive routes (dashboards) where SEO doesn't matter and you want SPA-feel navigation.

The App Router (Next.js 13+)

The App Router introduced React Server Components to mainstream React development. Key concepts:

• Server Components by default. Components fetch data on the server, render to HTML, and don't ship JavaScript to the browser. This is the biggest bundle-size win in years.
• Client Components opt-in via 'use client' directive. Used for interactive bits (forms, click handlers, useState).
• File-based routing via the app/ directory. app/blog/[slug]/page.tsx serves /blog/.
• Layouts via layout.tsx files. Persistent across navigations within their subtree.
• Loading and error UI via loading.tsx and error.tsx. Automatic Suspense boundaries.
• Server Actions for mutations: define a server function, call it from a client component, no API route needed.
• Parallel routes and intercepting routes for advanced layouts (modals, side-by-side panels).

What ships in the box

• File-based routing — directory structure = URL structure.
• Image optimization via <Image /> — automatic WebP/AVIF, responsive sizes, lazy loading, CDN integration.
• Font optimization via next/font — self-hosted Google Fonts with zero layout shift.
• API routes / Route Handlers — backend endpoints in the same project. Edge-runtime compatible.
• Middleware — runs at the edge before routes. Auth, A/B tests, geolocation routing.
• Built-in CSS support — Modules, Tailwind, Sass, CSS-in-JS adapters.
• TypeScript by default — type-safe routing, server actions, layouts.
• Turbopack — Rust-based dev server (replacing webpack), still stabilizing in 2026.
• Internationalization (i18n) — built-in routing for locale-prefixed URLs.

Next.js vs. alternatives

Common Next.js pitfalls

• Marking everything 'use client'. Defeats the bundle-size benefits of RSC. Lift state up to keep most components server-rendered.
• Wrong cache assumptions. Next 13+ has aggressive default caching; routes that should be dynamic get statically rendered. Use dynamic = 'force-dynamic' or revalidate explicitly.
• Mixing App Router and Pages Router incorrectly. They can coexist during migration but conflicting routes silently break. Migrate fully when you can.
• Forgetting <Image />. Native <img> bypasses Next's optimization. Always use next/image for images.
• Heavy use of dynamic imports for small components. Each dynamic import is a network round-trip. Reserve for genuinely large bundles.
• Vercel-only features. Some features (Edge Middleware, ISR) work everywhere but are Vercel-tuned. Self-hosted Next.js works fine but you implement the deployment plumbing.
• Over-fetching in layouts. A layout fetch runs on every page navigation under it. Lift fetches into specific routes when possible.

Deploying Next.js

• Vercel — first-party. Zero-config deploys, all features work. The default for new Next.js apps.
• Self-hosted (Node) — next build + next start. All features supported. Use when you need to run on AWS/GCP/Azure with full control.
• Self-hosted (Docker) — official guide for containerized Next.js. Common for enterprise.
• Static export — output: 'export' generates a fully-static site. Loses ISR/server-actions/API-routes but deploys to any CDN.
• Cloudflare Pages, Netlify, AWS Amplify — third-party platforms with Next.js adapters. Most features work with caveats.

FAQ: Next.js

Should I use App Router or Pages Router for new projects?

App Router. The Pages Router is in maintenance mode. App Router is the future of Next.js and gets new features.

Is Next.js only for React?

Yes — Next.js is React-specific. Vue has Nuxt; Svelte has SvelteKit; Solid has Solid Start. Each meta-framework specializes in its UI library.

Do I need Vercel to use Next.js?

No. Next.js is open-source and self-hostable. Vercel is the company that maintains it (and offers the default hosting), but the framework works anywhere Node runs. ~50% of large Next.js apps are not on Vercel.

What's the bundle-size impact of Next.js?

The framework adds ~70-90KB gzipped to your initial JS. RSC and selective hydration in App Router significantly reduce this for the user, since many components don't ship JavaScript at all.

How does Next.js handle SEO?

Excellently — Next.js was built for SEO. SSR/SSG ensure pages are crawlable. Built-in metadata API generates <title>, <meta>, OpenGraph, JSON-LD. Image and font optimization improve Core Web Vitals.

Can I use Next.js with TypeScript?

Next.js ships with TypeScript by default; create-next-app generates a TypeScript project unless you opt out. The framework's APIs are type-safe end-to-end.

What's Turbopack?

Vercel's Rust-based bundler that replaces webpack in Next.js dev mode. Still stabilizing in production builds (2026). Significantly faster cold starts and HMR.

How LoadFocus relates to Next.js applications

Next.js apps benefit from server-side optimization but still depend on backend latency for SSR routes and on edge cache hit rates for ISR. LoadFocus website speed testing measures Core Web Vitals on your deployed Next.js app from 30+ locations. Load testing validates SSR endpoints and Server Actions hold up under realistic concurrent traffic — the part of the app that doesn't auto-scale via static caching.