---
title: "Next.js 16.2"
source_name: "Next.js Blog"
original_url: "https://nextjs.org/blog/next-16-2"
canonical_url: "https://www.traeai.com/articles/3d552010-b433-427c-a369-d4c5506e8449"
content_type: "article"
language: "英文"
score: 8
tags: ["Next.js","React","前端框架","性能优化","AI开发工具"]
published_at: "2026-03-18T20:00:00+00:00"
created_at: "2026-04-16T05:44:10.996399+00:00"
---
# Next.js 16.2
Canonical URL: https://www.traeai.com/articles/3d552010-b433-427c-a369-d4c5506e8449
Original source: https://nextjs.org/blog/next-16-2
## Summary
Next.js 16.2 发布，重点优化开发体验与渲染性能。通过改进 React Server Components 的 JSON 反序列化机制，渲染速度提升最高 60%；开发服务器启动提速约 400%。新增服务端函数日志、水合差异指示器及生产环境调试支持，并强化 AI Agent 开发工具链。
## Key Takeaways
- 开发服务器启动提速约 400%，渲染性能因优化 JSON 反序列化机制提升最高 60%。
- 新增服务端函数终端日志、水合差异可视化指示器及 next start --inspect 调试支持。
- 强化 AI 开发体验，内置 AGENTS.md 模板并推出实验性 next-browser 工具。
## Content
Title: Next.js 16.2
URL Source: http://nextjs.org/blog/next-16-2
Published Time: 2026-03-18T20:00:00.000Z
Markdown Content:
# Next.js 16.2 | Next.js
[Skip to content](http://nextjs.org/blog/next-16-2#geist-skip-nav)
[](https://vercel.com/home?utm_source=next-site&utm_medium=banner&utm_campaign=blog_next-16-2 "Go to Vercel homepage")[](http://nextjs.org/ "Go to the homepage")
Search documentation...Search...⌘K
[](https://vercel.com/home?utm_source=next-site&utm_medium=banner&utm_campaign=blog_next-16-2 "Go to Vercel homepage")[](http://nextjs.org/ "Go to the homepage")
[Showcase](http://nextjs.org/showcase)[Docs](http://nextjs.org/docs "Documentation")[Blog](http://nextjs.org/blog)[Templates](https://vercel.com/templates/next.js?utm_source=next-site&utm_medium=navbar&utm_campaign=next_site_nav_templates)[Enterprise](https://vercel.com/contact/sales/nextjs?utm_source=next-site&utm_medium=navbar&utm_campaign=next_site_nav_enterprise)
Search documentation...Search...⌘K[Deploy](https://vercel.com/new/clone?utm_source=next-site&utm_medium=banner&b=main&s=https%3A%2F%2Fgithub.com%2Fvercel%2Fvercel%2Ftree%2Fmain%2Fexamples%2Fnextjs&template=nextjs&teamCreateStatus=hidden&utm_campaign=blog_next-16-2)[Learn](http://nextjs.org/learn)
[Back to Blog](http://nextjs.org/blog)
Wednesday, March 18th 2026
# Next.js 16.2
Posted by
[ Jimmy Lai@feedthejim](https://twitter.com/feedthejim)[ Tim Neutkens@timneutkens](https://twitter.com/timneutkens)
Next.js 16.2 includes performance improvements, better debugging, improvements for Agents, and over 200 Turbopack fixes and improvements.
* [**Faster Time-to-URL**](http://nextjs.org/blog/next-16-2#faster-time-to-url-in-development): ~400% faster `next dev` startup
* [**Faster Rendering**](http://nextjs.org/blog/next-16-2#faster-rendering): ~50% faster rendering
* [**New Default Error Page**](http://nextjs.org/blog/next-16-2#new-default-error-page): Redesigned built-in 500 page
* [**Server Function Logging**](http://nextjs.org/blog/next-16-2#server-function-logging): Dev terminal logs for Server Function execution
* [**Hydration Diff Indicator**](http://nextjs.org/blog/next-16-2#hydration-diff-indicator): Clear server/client diff in the error overlay
* [**`--inspect` for `next start`**](http://nextjs.org/blog/next-16-2#--inspect-for-next-start): Attach the Node.js debugger to your production server
We also published dedicated deep-dive posts for two major areas of this release:
* [**Turbopack**](http://nextjs.org/blog/next-16-2-turbopack): Faster builds, SRI support, `postcss.config.ts`, tree shaking improvements, Server Fast Refresh, and 200+ bug fixes
* [**AI Improvements**](http://nextjs.org/blog/next-16-2-ai): `AGENTS.md` in `create-next-app`, browser log forwarding, and `next-browser` (experimental)
Upgrade today, or get started with:
terminal
```
# Use the automated upgrade CLI
npx @next/codemod@canary upgrade latest
# ...or upgrade manually
npm install next@latest react@latest react-dom@latest
# ...or start a new project
npx create-next-app@latest
```
## Faster Time-to-URL in Development[](http://nextjs.org/blog/next-16-2#faster-time-to-url-in-development)
We've significantly improved the time it takes before `localhost:3000` is ready during `next dev`. On the same machine and project, startup is ~87% faster compared to Next.js 16.1 on the default application.
## Faster Rendering[](http://nextjs.org/blog/next-16-2#faster-rendering)
We [contributed a change](https://github.com/facebook/react/pull/35776) to React that makes Server Components payload deserialization up to 350% faster. The previous implementation used a `JSON.parse` reviver callback, which crosses the C++/JavaScript boundary in V8 for every key-value pair in the parsed JSON. Even a trivial no-op reviver makes `JSON.parse` roughly 4x slower than without one.
The new approach uses a two-step process: plain `JSON.parse()` followed by a recursive walk in pure JavaScript. This eliminates the boundary-crossing overhead and adds optimizations like short-circuiting plain strings that don't need transformation.
In real-world Next.js applications, this translates to 25% to 60% faster rendering to HTML, depending on the RSC payload size.
Server render time
Server Component Table with 1000 items
26% faster
Before
19ms
19ms
After
15ms
15ms
Server Component with nested Suspense
33% faster
Before
80ms
80ms
After
60ms
60ms
Payload CMS homepage
34% faster
Before
43ms
43ms
After
32ms
32ms
Payload CMS with rich text
60% faster
Before
52ms
52ms
After
33ms
33ms
## New Default Error Page[](http://nextjs.org/blog/next-16-2#new-default-error-page)
The default error page shown in production has been redesigned. When your application encounters an error and you haven't defined a custom `global-error.tsx` or `error.tsx`, Next.js renders a built-in fallback page. This fallback has been updated with a cleaner, more modern design.
The redesigned default error page in Next.js 16.2
## Server Function Logging[](http://nextjs.org/blog/next-16-2#server-function-logging)
Next.js now logs Server Function execution in the terminal during development. Each log shows the function name, its arguments, execution time, and the file it's defined in.
Server Function execution logs in the development terminal
## Hydration Diff Indicator[](http://nextjs.org/blog/next-16-2#hydration-diff-indicator)
When a hydration mismatch occurs, the error overlay now clearly labels which content came from the server and which from the client. The diff uses a `+ Client` / `- Server` legend, making it immediately clear what diverged.
The hydration diff indicator showing client/server content differences
## `--inspect` for `next start`[](http://nextjs.org/blog/next-16-2#--inspect-for-next-start)
Next.js 16.1 introduced `next dev --inspect` for attaching the Node.js debugger during development. In 16.2, this extends to `next start`, allowing you to attach a Node.js debugger to your production server.
terminal
`next start --inspect`
This is useful for debugging issues or profiling CPU and memory usage.
For more information on how to use the Node.js debugger, see the [Chrome documentation](https://developer.chrome.com/docs/devtools/performance/nodejs).
## `transitionTypes` Prop for `next/link`[](http://nextjs.org/blog/next-16-2#transitiontypes-prop-for-nextlink)
The `` component now accepts a [`transitionTypes`](https://react.dev/reference/react/addTransitionType) prop — an array of strings that specifies the types of View Transitions to apply when navigating. Each type is passed to `React.addTransitionType` during the navigation Transition, allowing you to trigger different animations based on the navigation direction or context.
```
About
```
This is only supported in the App Router, since the Pages Router does not use React Transitions for navigation. `transitionTypes` on Pages Router links is silently ignored, so shared link components work across both routers.
To learn more about view transitions, see the [documentation](http://nextjs.org/docs/app/api-reference/config/next-config-js/viewTransition).
## Faster `ImageResponse`[](http://nextjs.org/blog/next-16-2#faster-imageresponse)
`ImageResponse` has been updated with significant improvements:
* **2x faster**`ImageResponse` for basic images, up to **20x faster** for complex images
* Improved CSS and SVG coverage, including support for inline CSS variables, `text-indent`, `text-decoration-skip-ink`, `box-sizing`, `display: contents`, `position: static`, and percentage values for `gap`
* Default font changed from Noto Sans to Geist Sans
Learn more about [ImageResponse](http://nextjs.org/docs/app/api-reference/functions/image-response).
## Error Causes in the Dev Overlay[](http://nextjs.org/blog/next-16-2#error-causes-in-the-dev-overlay)
The error overlay now displays `Error.cause` chains, making it easier to debug errors that wrap other errors. Causes are shown in a flat list below the top-level error, up to 5 levels deep.
The error overlay showing the full error cause chain
## Adapters[](http://nextjs.org/blog/next-16-2#adapters)
[Adapters](http://nextjs.org/docs/app/api-reference/config/next-config-js/adapterPath) are now stable. This is a new API that allows platforms to customize the build process.
This is useful for deployment platforms or custom build integrations that need to modify the Next.js configuration or process the build output.
We will share a more detailed overview of Adapters next week.
## Multiple Icon Formats[](http://nextjs.org/blog/next-16-2#multiple-icon-formats)
Multiple icon files with the same base name but different extensions are now handled automatically in your app directory (e.g., `icon.png` and `icon.svg`). This is useful for browser fallback support. Modern browsers can use SVG icons while older browsers fall back to PNG. Both formats are rendered as separate `` tags.
## Experimental Features[](http://nextjs.org/blog/next-16-2#experimental-features)
### `unstable_catchError()`[](http://nextjs.org/blog/next-16-2#unstable_catcherror)
Extending the error recovery experience with the [`error.js`](http://nextjs.org/docs/app/api-reference/file-conventions/error) file convention, [`unstable_catchError()`](http://nextjs.org/docs/app/api-reference/functions/catchError) provides more granular control of the error boundaries on the component level. By creating a custom error boundary using `unstable_catchError()`, you can place it anywhere in your component tree.
Compared to a custom React error boundary, `unstable_catchError()` is designed to work with Next.js out of the box:
* **Built-in error recovery**: [`unstable_retry()`](http://nextjs.org/docs/app/api-reference/file-conventions/error#unstable_retry) re-renders the page from the server in transition.
* **Framework-aware integration**: APIs like `redirect()` and `notFound()` work by throwing special errors under the hood. `unstable_catchError()` handles these seamlessly, so they're not accidentally caught by your error boundary.
* **Client navigation handling**: The error state automatically clears when you do a client navigation to a different route.
The error boundary created by `unstable_catchError()` receives the props passed from the call site and the `ErrorInfo` value as the second argument, which is the same shape as the props passed to the `error.js` file convention.
Just like `error.js`, `unstable_catchError()` can only be called from [Client Components](http://nextjs.org/docs/app/getting-started/server-and-client-components).
app/custom-error-boundary.tsx
```
'use client';
import { unstable_catchError, type ErrorInfo } from 'next/error';
function CustomErrorBoundary(
props: { title: string },
{ error, unstable_retry }: ErrorInfo,
) {
return (
{props.title}
{error.message}
);
}
export default unstable_catchError(CustomErrorBoundary);
```
app/page.tsx
```
import CustomErrorBoundary from './custom-error-boundary';
export default function Page() {
return (
);
}
```
### `unstable_retry()` in `error.tsx`[](http://nextjs.org/blog/next-16-2#unstable_retry-in-errortsx)
A new [`unstable_retry()`](http://nextjs.org/docs/app/api-reference/file-conventions/error#unstable_retry) prop is now available in `error.tsx` components. Previously, the `reset()` prop only cleared the error state and re-rendered the children, which works for temporary rendering errors but doesn't help when the error originates from data fetching or the RSC phase.
`unstable_retry()` calls `router.refresh()` and `reset()` within a `startTransition()`, providing built-in retry logic that re-fetches data and re-renders the segment. This is expected to be preferred over `reset()` for most error recovery scenarios.
app/error.tsx
```
'use client';
import type { ErrorInfo } from 'next/error';
export default function Error({ error, unstable_retry }: ErrorInfo) {
return (