Learn what’s new in Next.js 16, including Turbopack, Cache Components, React Compiler, Proxy, routing improvements and how to start a new project.
Highlights
- Next.js 16 was released on October 21, 2025, and the 16.x major version is currently in Active LTS. (Next.js)
- Turbopack is now the default bundler for development and production builds in Next.js 16.
- Cache Components introduce a more explicit caching model built around the “use cache” directive and Partial Pre-Rendering concepts.
- React Compiler support is stable, although it is not enabled by default.
- proxy.ts replaces middleware.ts as the recommended convention, with the proxy running on the Node.js runtime.
- Next.js 16 also introduces routing and prefetching improvements, React 19.2 capabilities, improved caching APIs, and several breaking changes developers should understand before upgrading. (Next.js)
Next.js 16: Introduction
If you have been building websites with Next.js for a while, you probably know that a new major version is more than a new number in package.json.
A major release can change how your application builds, renders pages, handles requests, manages cached data and even how you organize certain files.
That is exactly what makes Next.js 16 interesting.
Released on October 21, 2025, Next.js 16 brought major changes to the framework’s development workflow, caching architecture and navigation system. By September 2026, the 16.x series had reached 16.3.x and was the Active LTS major version. (Next.js)
For someone new to Next.js, however, the release notes can look intimidating.
What is Turbopack?
What are Cache Components?
Why has middleware.ts become proxy.ts?
Should you enable React Compiler?
And what actually needs to change if you are upgrading an existing Next.js project?
Let’s walk through Next.js 16 step by step.
What Is Next.js 16?
Next.js 16 is a major release of the Next.js React framework developed by Vercel.
The release focuses heavily on:
- Faster development and builds
- Turbopack
- A new caching model
- Improved navigation
- React Compiler integration
- Better developer tooling
- AI-assisted development workflows
- Changes to routing and request interception
- Updated React capabilities
The release also includes breaking changes, so upgrading an existing application requires more care than simply changing the version number. (Next.js)
The important thing for beginners is that you do not need to understand every new feature before creating your first application.
You can start with the standard App Router setup and learn the advanced features as your project grows.
What’s New in Next.js 16?
-
Turbopack Is Now the Default
One of the most visible changes is the role of Turbopack.
Turbopack is the Rust-based bundler used by Next.js for development and production builds.
With Next.js 16, Turbopack became stable and is the default bundler for next dev and next build. (Next.js)
That means you generally no longer need scripts such as:
{
“scripts”: {
“dev”: “next dev –turbopack”,
“build”: “next build –turbopack”
}
}
The standard commands are enough:
npm run dev
npm run build
Next.js’s release documentation reports that Turbopack can provide up to 10× faster Fast Refresh and 2–5× faster production builds compared with the previous setup, although actual results depend on the application. (Next.js)
Why beginners should care
You may not notice the technology behind the build process, but you will notice when your development environment responds faster.
You change a component.
You save the file.
The browser refreshes.
That feedback loop is an important part of modern web development.
-
Turbopack File System Caching
Next.js 16 also introduced Turbopack file system caching for development as a beta feature, allowing compiler artifacts to be stored on disk between development sessions. (Next.js)
The feature later became stable for next dev in Next.js 16.1. (Next.js)
The basic idea is straightforward.
Without persistent caching, restarting your development environment can require the compiler to do more work again.
With file system caching, previously generated information can be reused.
For large applications, this can make repeated development sessions more efficient.
-
Cache Components Change the Caching Model
This is arguably one of the biggest architectural changes in Next.js 16.
Earlier versions of Next.js had several caching behaviors that developers needed to understand.
Next.js 16 introduces Cache Components, an opt-in model centered around the “use cache” directive.
You can enable the feature in next.config.ts:
const nextConfig = {
cacheComponents: true,
}
export default nextConfig
You can then use:
‘use cache’
export default async function Products() {
// Cached component logic
}
The important concept is that caching becomes more explicit.
Next.js explains that dynamic code in pages, layouts and API routes runs at request time by default under the Cache Components model, while developers can explicitly choose what to cache. (Next.js)
-
Cache Components Bring Partial Pre-Rendering Forward
Web applications often have a mixture of static and dynamic content.
Imagine an online store.
The product description might change rarely.
The user’s shopping cart changes frequently.
A recommendation section may depend on the visitor.
Previously, developers often had to think in terms of whether an entire route was static or dynamic.
Cache Components allow a more flexible model.
A page can contain cached content while dynamic portions are rendered separately.
This builds on the ideas behind Partial Pre-Rendering (PPR).
Next.js 16 removed the older experimental PPR configuration in favor of the Cache Components programming model. (Next.js)
A simple way to remember it
Think of a page as a house.
Some rooms rarely change.
Other rooms change whenever someone enters.
Instead of rebuilding the entire house every time, Cache Components let you think about those pieces independently.
-
React Compiler Support Is Stable
Next.js 16 includes stable support for the React Compiler.
The React Compiler can automatically optimize components by applying memoization where appropriate.
Next.js 16 supports enabling it with:
const nextConfig = {
reactCompiler: true,
}
export default nextConfig
You also need the React Compiler plugin:
npm install babel-plugin-react-compiler@latest
However, there is an important detail:
React Compiler is not enabled by default.
Next.js says developers should consider the build-time cost and application-specific behavior before enabling it. (Next.js)
Should a beginner enable it?
Not necessarily.
If you are learning Next.js, first understand components, Server Components, Client Components and application performance.
Then experiment with React Compiler when you have a reason to use it.
-
proxy.ts Replaces middleware.ts
Another noticeable change is the introduction of proxy.ts.
In Next.js 16, the recommended convention changes from:
middleware.ts
to:
proxy.ts
and the function is renamed from middleware to proxy.
For example:
import { NextRequest, NextResponse } from ‘next/server’
export function proxy(request: NextRequest) {
return NextResponse.redirect(
new URL(‘/home’, request.url)
)
}
Next.js explains that the new name is intended to make the network boundary and behavior clearer. The new proxy runs on the Node.js runtime. (Next.js)
The old middleware.ts convention remains available for Edge-runtime use cases but is deprecated and planned for removal in a future version. (Next.js)
What does Proxy do?
It can be useful for tasks such as:
- Redirecting requests
- Rewriting URLs
- Checking request information
- Applying request-level logic
For beginners, think of it as code that can sit between an incoming request and your application.
-
Navigation and Prefetching Have Been Improved
Next.js has always emphasized fast navigation.
Next.js 16 changes how route prefetching works.
Two important improvements are:
Layout deduplication
If several links share the same layout, Next.js can avoid downloading that shared layout repeatedly.
Incremental prefetching
Instead of unnecessarily fetching everything for a destination, Next.js can prefetch parts that are not already available in the client cache.
The prefetch system can also cancel requests when links leave the viewport and reprioritize prefetching based on user interaction. (Next.js)
For a website with many links, such as an e-commerce catalog, this can reduce unnecessary network transfers.
-
React 19.2 Features
Next.js 16 also incorporates React 19.2 capabilities.
Among the React features highlighted with the release are:
- View Transitions
- useEffectEvent
- <Activity />
These features address different parts of the React development experience.
For example, View Transitions can help create smoother visual transitions when UI changes.
useEffectEvent provides a way to separate non-reactive logic from Effects.
<Activity /> supports managing background UI activity while preserving state. (Next.js)
You do not need to use all of these features immediately.
Learn them when your application actually needs them.
-
Next.js DevTools MCP
Next.js 16 introduced Next.js DevTools MCP, which connects Next.js development information with AI tools that support the Model Context Protocol.
The integration can expose contextual information such as:
- Next.js routing behavior
- Caching information
- Browser and server logs
- Stack traces
- Information about the current page
This is particularly useful when working with AI coding assistants that can use MCP. (Next.js)
The idea is simple.
Instead of asking an AI assistant about an error without context, the development environment can provide the assistant with more relevant information about what the Next.js application is actually doing.
-
Improved Developer Logging
Next.js 16 improves development and build logs.
Development request logs can show different stages, including:
- Compile
- Render
Build output also reports the time taken by individual stages such as TypeScript checking, page generation and optimization. (Next.js)
This makes performance problems easier to investigate.
For example, instead of simply seeing:
Build failed
you can get more information about where time is being spent.
That becomes increasingly valuable as an application grows.
-
Better Caching APIs
Next.js 16 also introduces improvements to cache invalidation.
Among the APIs highlighted in the release are:
- updateTag()
- revalidateTag()
- refresh()
One important change is that revalidateTag() now expects a cache-life profile when used for stale-while-revalidate behavior, while updateTag() can be used in Actions when read-your-writes behavior is needed. (Next.js)
This matters particularly for applications that use databases, APIs and frequently changing content.
For beginners, the lesson is simple:
Do not add caching everywhere just because caching sounds faster.
First understand what data needs to be fresh and what data can safely be reused.
-
Build Adapters API
Next.js 16 introduced the Build Adapters API as an alpha feature.
Build adapters allow deployment platforms and custom integrations to interact with the build process and modify configuration or build output. (Next.js)
This is more relevant to hosting providers, framework integrations and advanced application teams than to someone creating their first blog.
You can safely put this feature on your “learn later” list.
-
Important next/image Changes
Next.js 16 includes several changes to image handling defaults.
For example:
- images.minimumCacheTTL default changed from 60 seconds to 4 hours.
- images.imageSizes no longer includes 16 by default.
- images.qualities defaults to [75].
- images.maximumRedirects now defaults to 3.
- Local IP image optimization is restricted by default. (Next.js)
There is also a security-related change involving local image sources with query strings, which now requires appropriate images.localPatterns configuration. (Next.js)
If you are upgrading an existing application that uses custom image configuration, review your next.config carefully.
Next.js 16 Breaking Changes You Should Know
A major release naturally comes with migration work.
Here are several changes worth checking.
Node.js 18 Is No Longer Supported
Next.js 16 requires:
Node.js 20.9 or later.
TypeScript 5.1 or later is also required, and the supported modern-browser baseline has changed. (Next.js)
Check your version:
node -v
If it is below 20.9, upgrade Node.js before attempting a Next.js 16 migration.
next lint Has Been Removed
Next.js 16 removes the next lint command.
Instead, use ESLint directly or another supported linting tool such as Biome.
For example:
{
“scripts”: {
“lint”: “eslint”
}
}
Next.js 16 also no longer runs linting automatically as part of next build. (Next.js)
params and searchParams Are Now Asynchronous
Code that previously accessed route parameters synchronously needs to be updated.
For example, older code may have looked like:
export default function Page({ params }) {
const slug = params.slug
}
In Next.js 16, the parameters need to be awaited:
export default async function Page({ params }) {
const { slug } = await params
}
The same principle applies to searchParams. (Next.js)
This is one of the changes most likely to appear during an upgrade.
How to Install Next.js 16
If you are starting a new project, the simplest approach is to use create-next-app.
First check Node.js:
node -v
Make sure you have Node.js 20.9 or later.
Then create the application:
npx create-next-app@latest my-next-app
Move into the project:
cd my-next-app
Start the development server:
npm run dev
Then open:
http://localhost:3000
The current Next.js installation documentation recommends create-next-app and provides defaults including TypeScript, Tailwind CSS, ESLint, App Router and Turbopack. (Next.js)
A Simple Next.js 16 Project Structure
After creating a project, you may see a structure similar to:
my-next-app/
├── app/
│ ├── layout.tsx
│ ├── page.tsx
│ └── globals.css
├── public/
├── package.json
├── next.config.ts
└── tsconfig.json
The important files for a beginner are:
app/page.tsx
Your homepage.
app/layout.tsx
The root layout shared across pages.
app/globals.css
Global styles.
next.config.ts
Next.js configuration.
public/
Static assets such as images and icons.
Build Your First Page
Open:
app/page.tsx
You can start with something simple:
export default function Home() {
return (
<main>
<h1>My Next.js 16 Website</h1>
<p>Welcome to my new Next.js application.</p>
</main>
)
}
Save the file.
Your browser should update through the development server.
Now you have a working Next.js application.
How to Add Another Page
With the App Router, create a folder inside app.
For example:
app/
├── page.tsx
└── about/
└── page.tsx
Then put this in app/about/page.tsx:
export default function About() {
return (
<main>
<h1>About Us</h1>
<p>This is the About page.</p>
</main>
)
}
The page becomes available at:
/about
This file-based routing model is one of the reasons the App Router is approachable for beginners.
How to Upgrade an Existing Project to Next.js 16
If you already have a Next.js project, do not upgrade production blindly.
Start by creating a backup or committing your current work to Git.
Then check your environment:
node -v
npm -v
Next, update Next.js and React:
npm install next@latest react@latest react-dom@latest
The official upgrade documentation also provides an automated codemod:
npx @next/codemod@canary upgrade latest
The codemod can assist with changes involving Turbopack configuration, linting, the middleware convention, stabilized APIs and older PPR configuration. (Next.js)
After upgrading, run:
npm run build
Then test the application carefully.
Check:
- Dynamic routes
- Authentication
- API routes
- Forms
- Middleware/proxy logic
- Images
- Metadata
- Caching
- Server Actions
- Database operations
- Third-party packages
A successful build is important, but it is not a substitute for testing the application’s behavior.
Next.js 15 vs Next.js 16
| Area | Next.js 15 | Next.js 16 |
| Major version | 15.x | 16.x |
| LTS status in 2026 | Maintenance LTS | Active LTS |
| Default bundler | Turbopack available with configuration | Turbopack by default |
| Caching | Earlier caching model | Cache Components model available |
| PPR | Experimental configuration | Integrated into Cache Components |
| Request interception | middleware.ts | proxy.ts recommended |
| React Compiler | Earlier support | Stable support |
| Node.js minimum | 18.x in Next.js 15 | 20.9+ |
| next lint | Deprecated | Removed |
| React | React 19 generation | React 19.2 capabilities |
The exact behavior of an existing project depends on how it was built, so migration should be based on the project’s actual dependencies and configuration rather than the version number alone. (Next.js)
Is Next.js 16 Good for SEO?
Next.js 16 does not automatically make a website rank higher.
However, it provides the tools needed to build technically strong websites.
For example, a Next.js application can implement:
- Server-rendered content
- Static generation
- Dynamic rendering
- Metadata
- Structured data
- XML sitemaps
- Canonical URLs
- Optimized images
- Fast navigation
- Responsive pages
- Proper HTTP responses
The framework is therefore well suited to SEO-focused websites, but content quality and SEO implementation still matter.
For a blog, for example, you should still create unique titles and descriptions, logical URLs, internal links and useful content.
Next.js provides the infrastructure.
You still have to build the SEO strategy.
Practical Tips for Next.js 16 Beginners
Start with the App Router
For a new project, the current create-next-app defaults use the App Router. (Next.js)
Learn:
- Layouts
- Pages
- Server Components
- Client Components
- Dynamic routes
- Loading UI
- Error handling
before moving into advanced caching.
Don’t Enable Every Feature Immediately
Next.js 16 contains many powerful capabilities.
That does not mean every project needs them.
For example, you might not need:
- React Compiler
- Cache Components
- Build Adapters
- Advanced caching APIs
- MCP development tools
on day one.
Add complexity when your application has a reason for it.
Keep Dependencies Updated
Next.js 16 is an Active LTS major release, and the project continues to publish security and maintenance releases. The official Next.js site reported version 16.3.8 as the September 2026 Active LTS security release. (Next.js)
For production applications, keep track of current 16.x releases rather than installing an old 16.x version and leaving it untouched.
Test Before Deploying
Before deployment:
npm run build
npm run start
Then test the production build locally.
Check the pages that matter most.
This is especially important after a major-version upgrade.
Where Can You Deploy Next.js 16?
Next.js can run in several environments.
The official documentation lists deployment options including:
- Node.js server
- Docker
- Static export
- Platform adapters
A Node.js deployment supports the complete Next.js feature set, while static export has limitations. (Next.js)
For a beginner, the easiest option is usually a hosting platform that has clear Next.js support.
Before selecting a platform, however, check which Next.js features your application actually requires.
A simple static website has different hosting requirements from an application using dynamic rendering, Server Actions, caching and streaming.
What Should You Learn After Next.js 16 Basics?
Once your first application works, a sensible learning path is:
Step 1: React fundamentals
Understand:
- Components
- Props
- State
- Hooks
- Events
Step 2: Next.js routing
Learn:
- App Router
- Dynamic routes
- Nested layouts
- Navigation
Step 3: Server and Client Components
Understand why some components need:
‘use client’
and why many do not.
Step 4: Data fetching
Learn how server-side data access works in your application.
Step 5: SEO
Add:
- Metadata
- Canonical URLs
- Open Graph images
- Structured data
- Sitemap
- robots.txt
Step 6: Performance
Then explore:
- Image optimization
- Caching
- Streaming
- Core Web Vitals
- Turbopack
Step 7: Advanced Next.js 16 features
Finally explore:
- Cache Components
- React Compiler
- Proxy
- Advanced cache APIs
- Instant navigation capabilities
- DevTools MCP
This order keeps the learning curve manageable.
Common Next.js 16 Mistakes to Avoid
Mistake 1: Upgrading without a backup
Major-version upgrades can expose compatibility issues.
Commit your working application before starting.
Mistake 2: Ignoring Node.js requirements
Next.js 16 requires Node.js 20.9 or later. (Next.js)
Mistake 3: Assuming next lint still works
It has been removed in Next.js 16. Use ESLint or another supported linting workflow. (Next.js)
Mistake 4: Treating Cache Components as a magic performance switch
Caching requires understanding data freshness.
Do not cache information simply because you can.
Mistake 5: Ignoring asynchronous APIs
Review code using:
- params
- searchParams
- cookies()
- headers()
- draftMode()
because Next.js 16 changed their access patterns. (Next.js)
Mistake 6: Updating without testing third-party packages
Your application may depend on libraries that have their own compatibility requirements.
Check them after upgrading.
Frequently Asked Questions
-
What is Next.js 16?
Next.js 16 is a major version of the Next.js React framework released on October 21, 2025. It introduced major changes to Turbopack, caching, navigation, developer tooling and request handling. (Next.js)
-
Is Next.js 16 free to use?
Yes. Next.js is an open-source framework. The framework itself can be installed through npm and used to create applications without purchasing a Next.js license.
-
What Node.js version does Next.js 16 require?
Next.js 16 requires Node.js 20.9 or later. Node.js 18 is no longer supported. (Next.js)
-
What is the biggest new feature in Next.js 16?
There is no single feature that is universally “the biggest,” but Cache Components, stable Turbopack, React Compiler support, improved navigation and the new Proxy convention are among the major changes in the release. (Next.js)
-
Should I upgrade my Next.js 15 project to Next.js 16?
The answer depends on your application’s dependencies, configuration and need for the newer framework capabilities. Next.js 16 is currently the Active LTS major, while 15.x is in Maintenance LTS. Before upgrading, review the migration guide, run the codemod where appropriate, create a backup and test your application thoroughly. (Next.js)
Key Takeaways
- Next.js 16 is an Active LTS major release and was originally released on October 21, 2025. (Next.js)
- Turbopack is now the default bundler, simplifying development and production builds.
- Cache Components provide a more explicit approach to caching and combine with the framework’s newer Partial Pre-Rendering model.
- React Compiler support is stable, but developers must opt into it.
- proxy.ts replaces middleware.ts as the recommended convention for request interception.
- Next.js 16 requires Node.js 20.9 or newer and introduces several migration-related breaking changes.
- Beginners should learn the App Router and core Next.js concepts first, then gradually explore caching, performance and advanced features.
Conclusion
Next.js 16 is not simply another framework update.
It represents a broader shift in how Next.js approaches performance, caching, navigation and developer tooling.
Turbopack is now the default. Cache Components give developers more explicit control over cached content. React Compiler support has become stable. Navigation and prefetching have been redesigned, while proxy.ts provides a clearer model for request interception.
For beginners, however, the best approach is not to learn every feature at once.
Start with a simple application.
Create a page.
Add a layout.
Build a dynamic route.
Fetch some data.
Learn how Server and Client Components work.
Then move into the advanced capabilities that solve real problems in your project.
If you already have a Next.js application, treat the move to version 16 as a proper migration rather than a routine dependency update. Check the Node.js requirement, review breaking changes, use the official upgrade tools, run a production build and test important application paths before deploying.
That approach lets you take advantage of the Next.js 16 ecosystem while keeping your application understandable, maintainable and ready for future improvements.
Recommended authoritative references
- Next.js 16 release announcement
- Next.js 16 upgrade guide
- Next.js installation documentation
- Next.js 16.2 release
- Next.js support policy and current LTS versions
For More Articles on Next.js:
Next.js SEO: Complete Guide for Developers
Next.js PostgreSQL : How to Connect PostgreSQL to Next.js: Step-by-Step Tutorial
Next.js Metadata API: Complete SEO Guide to Titles, Descriptions and Open Graph
Next.js Sitemap and Robots.txt: Complete SEO Configuration Guide
Next.js Structured Data: How to Add JSON-LD Schema Markup
Next.js Core Web Vitals: How to Improve LCP, INP and CLS
Next.js Image Optimization: Complete Guide to Faster Websites