Next.js
Last reviewed
Sources
19 citations
Review status
Source-backed
Revision
v2 ยท 4,788 words
Improve this article
Add missing citations, update stale details, or suggest a clearer explanation.
Suggest edit
CtrlK
Last reviewed
Sources
19 citations
Review status
Source-backed
Revision
v2 ยท 4,788 words
Add missing citations, update stale details, or suggest a clearer explanation.
Next.js is an open-source React framework developed and maintained by Vercel that has become the default way to ship production AI products, especially streaming chat interfaces and other large language model frontends. First released on October 25, 2016, it is the most widely used React meta-framework, with a 52.9% adoption rate in the State of JavaScript 2024 survey, the highest of any meta-framework. [1][10] It powers the web apps for OpenAI's ChatGPT, Notion, TikTok, Hulu, Twitch, and Loom, among tens of thousands of other companies, and it is the framework Vercel uses for its own AI products including the v0 app generator. The framework provides server-side rendering, static site generation, file-based routing, React Server Components, and a Rust-powered build system called Turbopack, and it pairs with the Vercel AI SDK to make building streaming AI apps a few lines of code. Next.js is released under the MIT license, the result of "the combined work of over 3,000 individual developers," with its source code hosted at github.com/vercel/next.js. [2]
| Field | Value |
|---|---|
| Developer | Vercel and the open-source community |
| Original author(s) | Guillermo Rauch, Tim Neutkens, Naoyuki Kanezawa, Tony Kovanen, Arunoda Susiripala, Dan Zajdband |
| Initial release | October 25, 2016 |
| Latest major release | Next.js 16 (October 21, 2025) |
| Latest minor release | Next.js 16.2 (March 18, 2026) |
| Written in | JavaScript, TypeScript, Rust |
| License | MIT License |
| Repository | github.com/vercel/next.js |
| Website | nextjs.org |
| Type | Web framework, React meta-framework |
| Lead maintainer | Tim Neutkens |
Next.js was created by Guillermo Rauch and the team at Zeit and first open-sourced on GitHub on October 25, 2016. [1][6] Rauch is now CEO of Vercel, while Tim Neutkens leads the framework as its lead maintainer.
Guillermo Rauch is an Argentinian software engineer who had earlier built the Socket.IO real-time communication library and sold his first company, Cloudup, to Automattic. After leaving Automattic in 2015, Rauch founded a company called Zeit (German for "time") in San Francisco with co-founders Tony Kovanen and Naoyuki Kanezawa. Zeit's first product was Now, a deployment platform that abstracted away the typical pain of pushing applications to a server.
The team needed a React framework that worked well with Now's deployment model, and what they wanted did not yet exist. The result was Next.js, which Rauch and the Zeit team open-sourced on GitHub on October 25, 2016. [12] The original release shipped with file-based routing, automatic code splitting, hot module replacement, and server-side rendering as defaults. None of those features were new individually; the appeal was that they all came preconfigured.
In April 2020, Zeit rebranded as Vercel and the Now platform was renamed Vercel as well. The same year, the company raised a $21 million Series A round led by Accel. Vercel has continued to grow as both the steward of Next.js and a hosting platform optimized for it. As of late 2025, Vercel raised a $300 million Series F at a $9.3 billion valuation, with revenue passing a $340 million annual run-rate by March 2026. [11]
Despite the company's growth, Next.js has remained MIT-licensed and runnable on any host that can serve a Node.js application. The relationship between the framework and Vercel sometimes draws scrutiny because some new features land first on Vercel's own platform before they work cleanly elsewhere, but the core framework is genuinely portable.
Next.js follows a roughly twice-a-year major release cadence, usually announced at Next.js Conf in October. Smaller minor and patch versions ship constantly, often weekly.
| Version | Released | Headline change |
|---|---|---|
| 1.0 | October 25, 2016 | Initial release with file-based routing, SSR, code splitting |
| 2.0 | March 2017 | Smaller core, improved build performance |
| 7.0 | September 2018 | React Context API support, Webpack 4, dynamic routes |
| 8.0 | February 2019 | Serverless deployment mode |
| 9.0 | July 2019 | TypeScript support, dynamic route segments, automatic static optimization |
| 9.3 | March 2020 | getStaticProps, getServerSideProps, getStaticPaths |
| 9.5 | July 2020 | Incremental Static Regeneration (ISR) |
| 10 | October 2020 | Built-in next/image component, internationalized routing |
| 11 | June 2021 | next/script, conformance, real-time collaboration tooling |
| 12 | October 2021 | Rust-based SWC compiler, Middleware (beta), Edge Functions |
| 13 | October 25, 2022 | App Router (beta), React Server Components, Streaming, Turbopack alpha |
| 13.4 | May 2023 | App Router stable, Server Actions alpha |
| 14 | October 26, 2023 | Server Actions stable, Partial Prerendering preview |
| 15 | October 21, 2024 | React 19 support, async request APIs, Turbopack dev stable |
| 16 | October 21, 2025 | Turbopack default, Cache Components, proxy.ts, React 19.2, React Compiler stable |
| 16.2 | March 18, 2026 | ~400% faster next dev startup, ~50% faster rendering, 200+ Turbopack fixes |
The biggest architectural shift in the framework's history was the introduction of the App Router in Next.js 13. The previous Pages Router, which mapped files in the pages/ directory to routes, was simple but limited; complex layouts required wrapping every page in the same root component, and there was no built-in way to stream parts of a page. The App Router, built on top of React Server Components, introduced nested layouts, server-first rendering by default, streaming with Suspense boundaries, and colocation of routes with their data and styles.
When the App Router shipped in October 2022, it was beta. It went stable for production with Next.js 13.4 in May 2023. [13] Adoption was slow at first because the model was new and many third-party libraries had to update. By 2024 it was the recommended path for new applications, and by 2025 most large Next.js codebases at major companies had completed the migration. The Pages Router still works and is supported, but Vercel positions it as the legacy path.
Next.js 15, released on October 21, 2024, was the version that aligned the framework with React 19. [3] It made the request APIs (headers, cookies, params, searchParams) asynchronous, changed caching defaults so that fetch requests and GET route handlers were no longer cached by default, and shipped Turbopack as a stable option for next dev. [14] The release also introduced experimental support for the React Compiler, which automatically memoizes components without manual useMemo or useCallback calls.
The caching changes were controversial. Earlier versions of the App Router cached aggressively by default, which surprised developers who expected fetch calls to behave like normal network requests. Vercel's own engineers acknowledged the original defaults had been wrong, and Next.js 15 walked them back.
Next.js 16 shipped on October 21, 2025, ahead of Next.js Conf 2025. [2] The release made Turbopack the default bundler for all new projects, retiring the Webpack default that had been in place since 2016. Vercel reported up to 10 times faster Fast Refresh and 2 to 5 times faster production builds compared to Webpack on representative apps. [2] The opt-out flag is next build --webpack for teams that need it, but the new path is Turbopack everywhere.
Alongside Turbopack, Next.js 16 introduced Cache Components, a new caching model built around the explicit "use cache" directive. As Vercel describes it, "caching with Cache Components is entirely opt-in. All dynamic code in any page, layout, or API route is executed at request time by default." [2] This replaced the earlier behavior, where the framework cached most things by default and made you opt out, and it completes the Partial Prerendering effort that began in 2023, in which a static shell is served immediately and dynamic regions stream in via React Suspense.
The release also renamed middleware.ts to proxy.ts to make it clearer that the file runs at the network boundary on the Node.js runtime. [2] The old middleware.ts filename still works for Edge Runtime use cases but is deprecated. React Compiler support became stable, following the React Compiler's own 1.0 release. The minimum Node.js version moved to 20.9, and TypeScript 5.1 became the floor.
A newer addition is Next.js Devtools MCP, a Model Context Protocol server that exposes routing, caching, and rendering information to AI coding agents. [2][16] The idea is that an agent debugging a Next.js application can read the actual server logs, errors, and route context without copy and paste. Per Vercel, the MCP gives AI agents "Next.js knowledge" of "routing, caching, and rendering behavior," unified browser and server logs, automatic error access, and awareness of the active route. [16]
Next.js 16.2, released on March 18, 2026, focused on speed and on tooling for AI agents: Vercel reported roughly 400% faster next dev startup, roughly 50% faster rendering (via a React change that makes Server Components payload deserialization up to 350% faster), and more than 200 Turbopack fixes and improvements. [17]
Next.js supports several rendering strategies for the same application, often mixing them within a single deployment. The choice usually depends on how often the data changes and how personalized each request needs to be.
The server runs the React component tree on every request and returns fully formed HTML. This is the rendering model the framework was originally designed around, and it remains the default for any page or component that reads request-specific data. SSR is good when content depends on cookies, headers, or query parameters that change per visitor.
Pages can be rendered to HTML at build time, then served as static files from a CDN. SSG is fast because there is no compute on the request path. It is the right choice for content that does not change between visitors and that does not change frequently between deploys.
ISR is a Vercel-pioneered feature, introduced in Next.js 9.5 (July 2020), that bridges SSG and SSR. Pages are statically generated, but they can be regenerated in the background after a configurable interval or when explicitly invalidated. Visitors get the speed of static, while editors get the freshness of dynamic.
With the App Router and React 18+, components run on the server by default. They can fetch data directly without an API layer, and they ship zero JavaScript to the client unless they explicitly opt into being a Client Component with the "use client" directive. This is a fundamental shift in how a React application is structured. Server Components reduce bundle size because the rendering code itself stays on the server.
With RSC, parts of a page can be sent to the client progressively as they finish rendering. The static shell shows up immediately, and individual sections stream in as their data resolves. This is what makes Partial Prerendering possible, and it is the same mechanism that makes streaming chat UIs feel snappy.
Server Actions, stable since Next.js 14, let you call server functions directly from React components. [4] You write a function with "use server" at the top, attach it to a form's action prop or call it from an event handler, and Next.js handles the network round trip. They are integrated with revalidation so that mutating data and refreshing the cache happens in a single request.
Cache Components, the model that landed in Next.js 16, formalize the boundary between cached and dynamic content. You opt parts of a page into caching with "use cache" and leave the rest dynamic. The compiler generates cache keys, and the framework streams the dynamic parts after the cached shell has been served. [2] This replaces both the old experimental experimental.ppr flag and the implicit caching that made earlier App Router behavior hard to reason about.
Most Next.js codebases now use the App Router. The Pages Router still ships, still receives bug fixes, and still works fine for the kinds of applications it was designed for. The two routers can coexist in the same project.
| Aspect | Pages Router | App Router |
|---|---|---|
| Directory | pages/ | app/ |
| Routing | File-based, flat | File-based, nested with layouts |
| Default rendering | Client Components | Server Components |
| Layouts | Manual via _app.js | Built-in nested layout.js |
| Data fetching | getStaticProps, getServerSideProps, getStaticPaths | async Server Components, fetch with cache options |
| Streaming | Limited | First-class via Suspense |
| Mutations | API routes | Server Actions |
| Loading UI | Manual | Built-in loading.js |
| Error handling | _error.js | Per-segment error.js |
| Introduced | Next.js 1.0 (2016) | Next.js 13 (2022), stable in 13.4 (2023) |
| Status | Supported, in maintenance | Recommended for new code |
The migration path is incremental. Both routers can run side by side, so a team can move pages over one at a time. Vercel publishes codemods that automate parts of the conversion.
A file in app/ or pages/ becomes a route. Folders nest. Dynamic segments use square brackets, like app/posts/[slug]/page.tsx. Catch-all and optional catch-all routes use [...slug] and [[...slug]]. There is no router configuration to maintain.
The next/image component handles responsive images, lazy loading, and on-the-fly format conversion (WebP, AVIF). It generates srcsets, prevents layout shift by requiring width and height, and ships native lazy loading. By default, it uses the sharp library on the server to resize images.
The next/font system, originally @next/font in Next.js 13, downloads font files at build time, self-hosts them with the rest of the static assets, and applies CSS size-adjust to eliminate layout shift. No network requests go to Google Fonts at runtime.
The next/script component lets you control when third-party scripts load (beforeInteractive, afterInteractive, lazyOnload, worker).
Middleware lets you intercept requests before they hit a route handler. As of Next.js 16, this file is called proxy.ts and runs on the Node.js runtime. [2] The older middleware.ts name still works for Edge Runtime use cases but is deprecated.
The App Router uses Route Handlers (route.ts files exporting GET, POST, etc.), while the Pages Router uses API Routes (files in pages/api/). Both are server-side endpoints, and they are where most Next.js apps call model provider APIs. Route Handlers integrate with the new caching APIs.
Built-in i18n routing was introduced in Next.js 10, with locale-prefixed URLs and automatic detection from the Accept-Language header.
Next.js handles global CSS, CSS Modules, and Sass out of the box. Tailwind CSS is the default styling option in create-next-app templates.
Turbopack is a Rust-based bundler that Vercel built as the successor to Webpack. It was first announced as an alpha in Next.js 13 in October 2022, became stable for next dev in Next.js 15 in October 2024, and became the default for both next dev and next build in Next.js 16 in October 2025. [2][14]
The technical motivation is that Webpack, written in JavaScript, hits a ceiling on what a JavaScript-based bundler can do. Turbopack uses Rust and an incremental compilation model based on Vercel's Turbo engine. In Vercel's own benchmarks on vercel.com, Turbopack delivers up to 76.7% faster local server startup, up to 96.3% faster Fast Refresh, and 2 to 5 times faster production builds compared to Webpack. Adoption ramped quickly: by the time Next.js 16 launched, "more than 50% of development sessions and 20% of production builds on Next.js 15.3+" were already running on Turbopack. [2]
Turbopack supports Server Components, TypeScript, JSX, CSS, and most of the Webpack ecosystem out of the box. Apps with custom Webpack plugins can stay on Webpack via next dev --webpack. A filesystem cache for development is in beta in Next.js 16, which speeds up restarts in large repositories.
Next.js can run server code in two runtimes: the standard Node.js runtime, and an Edge Runtime that uses a smaller JavaScript engine compatible with Web APIs. The Edge Runtime, introduced as Edge Functions in Next.js 12 (October 2021), is designed for edge computing: code runs at a CDN point of presence near the user instead of in a centralized data center.
Edge functions have lower latency for the first byte but limited APIs (no Node.js native modules, no filesystem). Vercel runs them on its own edge network, Cloudflare Workers can run them via adapters, and most other hosts can run them too. The Edge Runtime is most useful for personalization, geolocation, A/B tests, and any logic that needs to be close to the user.
As the Cache Components model has matured, Vercel has positioned the Edge Runtime as one option among several rather than the default for everything. In Next.js 16, the new proxy.ts file runs on Node.js by default; the Edge Runtime version remains available for Middleware-style use cases that benefit from being at the edge.
Next.js has become the default frontend framework for AI products, especially anything involving a chat interface or streaming model output. Several factors made this happen.
LLM outputs are slow. Even fast models take seconds to finish a long response, and the user experience hinges on showing tokens as they arrive rather than waiting for the full response. React Server Components and the App Router's streaming model fit this pattern naturally. A Server Component can await a streaming generator from a model, render tokens as they arrive, and Next.js will stream the partial render down to the browser. The same primitive that makes a product page faster also makes a chat UI feel responsive.
The Vercel AI SDK is, in its own GitHub description, "the AI Toolkit for TypeScript. From the creators of Next.js, the AI SDK is a free open-source library for building AI-powered applications and agents." [9] It abstracts away differences between LLM providers behind a unified streamText and generateText API that works with OpenAI, Anthropic, Google Generative AI, Amazon Bedrock, Azure, Mistral, Groq, xAI, DeepSeek, Cohere, and roughly twenty other providers. [9] It also ships React hooks (useChat, useCompletion, useObject) for client-side chat UIs.
The AI SDK is the most widely used AI toolkit in the JavaScript ecosystem. Vercel described it in its AI SDK 5 announcement as having "over 2 million weekly downloads," calling it "the leading open-source AI application toolkit for TypeScript and JavaScript." [18] The project has more than 25,000 stars on GitHub. [9] AI SDK 6, the current major line as of 2026, adds first-class agents (a reusable ToolLoopAgent abstraction) and human-in-the-loop tool approval. [19]
The typical pattern is straightforward. A Route Handler or Server Action calls streamText({ model, messages }) against whatever provider you want, returns a streaming response, and a client component built with useChat consumes it. Switching providers is usually a one-line change. The SDK handles the streaming format, tool calling, structured output, and reasoning tokens for models that support them. The SDK is framework-agnostic, but it ships with first-class Next.js examples and templates, including the official Next.js AI Chatbot starter that thousands of teams have forked.
The AI SDK and Server Components together enable what Vercel calls Generative UI: an LLM that returns React components rather than text. Tool calls return structured arguments, and the server renders the matching components into the streaming response. A weather agent can return a real <WeatherCard temperature={72} /> instead of a string.
v0 is Vercel's generative AI tool that turns natural-language prompts into working React and Next.js code. It launched in beta in October 2023 as a UI component generator and was rebranded from v0.dev to v0.app in January 2026, by which point it had grown into a full-stack sandbox capable of generating Next.js applications with Route Handlers and Server Actions. v0 outputs standard React/Next.js code built on shadcn/ui and Tailwind CSS, so generated components drop into an existing project. It is one of the clearest examples of Next.js being both the output and the substrate of an AI product.
| Product | Company | Notes |
|---|---|---|
| ChatGPT | OpenAI | The web app for ChatGPT, the most-trafficked AI product, is a Next.js application |
| v0 | Vercel | AI UI generator that produces React and Next.js code |
| Perplexity | Perplexity AI | AI-powered search engine |
| Anthropic | Anthropic | Claude.ai and parts of anthropic.com |
| Cursor | Anysphere | The marketing site and dashboard for the AI code editor |
| Hugging Face | Hugging Face | Parts of the model hub interface |
| Suno | Suno | AI music generation web app |
| Replicate | Replicate | Model hosting platform UI |
The pattern is consistent. Teams that need to ship a streaming chat or generative UI quickly tend to reach for Next.js plus the AI SDK because the alternative is rebuilding the streaming plumbing from scratch.
Next.js is the most-used React meta-framework by a comfortable margin. According to the State of JavaScript 2024 survey, Next.js had a 52.9% adoption rate among respondents, the highest of any meta-framework, ahead of Astro (around 25%) and SvelteKit (around 17%). [10] The npm next package consistently downloads more than 9 million times per week. The GitHub repository has over 130,000 stars and, in Vercel's words, is "the result of the combined work of over 3,000 individual developers." [2]
Vercel reported in 2025 that Next.js was downloaded more times in the prior twelve months than from 2016 through 2024 combined. The framework's footprint at large companies includes Walmart, Apple, Nike, Netflix, TikTok, Uber, Lyft, Starbucks, Spotify, Notion, Hulu, Twitch, Loom, Sonos, Hashnode, and Target.
Sentiment is more mixed than usage. The same State of JavaScript 2024 report noted that positive sentiment toward Next.js had declined as alternatives like Remix, SvelteKit, and Astro became more mainstream. [10] Some of the dissatisfaction tracks to the App Router's caching defaults (which Vercel walked back in version 15) and to the perception that some features land first on Vercel's hosting before they work cleanly elsewhere.
Vercel is the natural home for Next.js because Vercel's product and Next.js's release cycle are tightly coupled. New features often work on Vercel from day one and take longer to get adapter support elsewhere. That said, Next.js is genuinely portable.
| Host | Notes |
|---|---|
| Vercel | Native, all features supported on the day they ship |
| Netlify | First-party Next.js adapter, supports App Router and ISR |
| Cloudflare Workers | Via OpenNext or Cloudflare's official adapter, runs on the edge |
| AWS Amplify | Hosting service with first-class Next.js support |
| AWS via OpenNext | Open-source serverless adapter, deploys to Lambda and CloudFront |
| Self-hosted Node.js | Run next start on any server with Node.js 20.9+ |
| Docker | Standalone output mode produces a small Docker image |
| Static export | output: 'export' for fully static sites without a server |
The Build Adapters API, introduced in alpha in Next.js 16, gives non-Vercel platforms a sanctioned way to hook into the build process. [2] The intent is to make non-Vercel hosting a more equal experience over time.
Next.js is one of several React and JavaScript meta-frameworks. The right choice usually depends on what kind of application you are building and what ecosystem you are already in.
| Framework | Underlying library | Maintainer | Initial release | Strengths |
|---|---|---|---|---|
| Next.js | React | Vercel | October 2016 | Largest ecosystem, server components, AI SDK integration |
| Remix | React | Shopify, now part of React Router 7 | November 2021 | Web standards, nested data loading, simpler caching model |
| Nuxt | Vue | Nuxt Labs | October 2016 | Vue ecosystem, Nitro engine, modular |
| SvelteKit | Svelte | Svelte team | December 2022 | Smallest bundle sizes, runes-based reactivity, fast |
| Astro | Multi-framework (React, Vue, Svelte, Solid) | Astro team, acquired by Cloudflare in January 2026 | August 2022 | Static-first, islands architecture, smallest JS for content sites |
| Gatsby | React | Netlify (acquired 2023) | 2015 | Plugin-rich, GraphQL data layer, content sites |
| RedwoodJS | React | Tom Preston-Werner et al. | 2020 | Full-stack with GraphQL and Prisma baked in |
For a React team building a full-stack application that needs server rendering, streaming, and AI features, Next.js is the path of least resistance. For a content-heavy site that ships almost no JavaScript, Astro is faster. For a team that wants the smallest possible bundles and the simplest mental model, SvelteKit is appealing. Remix's ideas have been folded into React Router 7, so the choice between Next.js and Remix is now closer to a choice between two configurations of React itself.
Next.js has been called "the React framework for the web" by Vercel and is taught in nearly every modern React course. Developers who like it point to its ergonomics, its aggressive performance defaults, the speed of new feature delivery, and the polish of next/image, next/font, and next/link. Vercel's investment in tooling is unusual for an open-source project.
Critics raise a few recurring concerns. The App Router's caching behavior in Next.js 13 and 14 caught many developers off guard, with fetch calls being aggressively cached in ways that made debugging painful. Vercel acknowledged the issue and changed the defaults in Next.js 15 and again with the Cache Components model in Next.js 16. The pace of change itself is also a complaint: every major release has breaking changes, and the App Router required teams to relearn how data fetching, layouts, and mutations work.
The other recurring criticism is the Vercel relationship. Some features feel like they exist primarily to differentiate Vercel from competitors, and self-hosting can require more setup than the documentation lets on. The Build Adapters API and the framework's continued MIT licensing are direct responses to that critique.
Next.js is actively maintained and patched, but it has had notable vulnerabilities. In March 2025, a critical authentication bypass vulnerability, CVE-2025-29927, was disclosed that affected versions of Next.js with middleware. [15] It carried a CVSS score of 9.1 and allowed an attacker to bypass middleware authorization checks by spoofing the internal x-middleware-subrequest header, potentially reaching protected routes. The flaw affected releases earlier than 12.3.5, 13.5.9, 14.2.25, and 15.2.3, and Vercel shipped patched versions; Vercel-hosted deployments were protected automatically while self-hosted apps had to upgrade. [15] The incident prompted some criticism of how middleware-based authorization patterns had been encouraged.