Skip to content

Commit dc5547c

Browse files
authored
docs: update documentation translations
1 parent 3267414 commit dc5547c

File tree

10 files changed

+600
-329
lines changed

10 files changed

+600
-329
lines changed
Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
---
2+
source-updated-at: 2025-08-09T22:43:53.000Z
3+
translation-updated-at: 2025-08-09T23:03:38.480Z
4+
title: Next.js 15.4 发布
5+
description: >-
6+
Next.js 15.4 包含性能、稳定性及 Turbopack 兼容性的更新。
7+
author:
8+
- name: Jimmy Lai
9+
image: /static/team/jimmy.jpg
10+
- name: Zack Tanner
11+
image: /static/team/zack.jpg
12+
date: 2025-07-14T20:00:00.000Z
13+
image: >-
14+
https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/next-15-4/twitter-card.png
15+
---
16+
17+
Next.js 15.4 包含性能、稳定性及 Turbopack 兼容性的更新。本次版本亮点包括:
18+
19+
* [**Turbopack 构建**](/blog/next-15-4#turbopack-builds)`next build --turbopack` 实现 100% 集成测试兼容
20+
* [**稳定性改进**](/blog/next-15-4#notable-changes):Next.js 和 Turbopack 的多项稳定性与性能提升
21+
22+
本文还包含 Next.js 16(下个主要版本)的早期预览内容。
23+
24+
立即升级或通过以下命令开始:
25+
26+
```bash filename="终端"
27+
# 使用自动化升级 CLI
28+
npx @next/codemod@canary upgrade latest
29+
30+
# ...或手动升级
31+
npm install next@latest react@latest react-dom@latest
32+
33+
# ...或新建项目
34+
npx create-next-app@latest
35+
```
36+
37+
[Turbopack 构建](#turbopack-builds)
38+
-------------------------------------
39+
40+
`next build --turbopack` 现已通过[**全部 8298 项集成测试**](https://areweturboyet.com/),并为生产环境构建提供支持,目前已应用于 `vercel.com`。这是将 Turbopack 标记为稳定版的关键里程碑。
41+
42+
团队当前优先事项是通过生产环境分块优化完成打包改进,并修复 Alpha 版本早期使用者报告的缺陷。我们还在底层对 Turbopack 进行了多项稳定性和性能改进。
43+
44+
我们确信 Turbopack 即将具备生产环境使用条件,并计划在 Next.js 16 中推出测试版。如果您曾尝试过 Turbopack,现在是再次体验的良机。如遇问题请提交至 [GitHub Issues](https://github.com/vercel/next.js/issues)
45+
46+
[展望未来:Next.js 16](#looking-ahead-nextjs-16)
47+
-----------------------------------------------------
48+
49+
过去数月,我们持续迭代 Next.js 的重大改进,聚焦于 Turbopack 的开发者体验以及 App Router 的核心能力(如 `PPR``use cache`)。虽然尚未默认启用这些功能,但我们正为今夏 Next.js 16 的用户体验奠定基础。
50+
51+
以下是 Next.js 16 的预览内容:
52+
53+
* **缓存组件 (Cache Components)(测试版)**:整合实验性缓存功能(动态 I/O、`use cache` 和部分预渲染)为统一的 `cacheComponents` 标志,简化性能优化策略。Next.js 16 博客将详述设计理念。
54+
* **Turbopack 构建(测试版)**:推出 `next build --turbopack`,完全通过集成测试,并在 vercel.com 等高流量站点完成内部验证。将在 Next.js 16 中开放公测。
55+
* **优化的客户端路由**:通过智能预取、改进的缓存失效策略和降低带宽消耗,增强 App Router 导航体验,实现更快速响应。
56+
* **开发者工具与调试**:新增路由信息检查功能,可查看应用结构并切换 `loading.tsx` 等组件。实验性支持浏览器日志转发至终端,助力 AI 辅助调试。
57+
* **Node.js 中间件(稳定版)**:将 Next.js 15.2 引入的实验性 Node.js 运行时中间件支持升级为稳定版。
58+
* **部署适配器(测试版)**:支持创建自定义部署适配器,实现对构建和部署目标的精细化控制。
59+
* **次要弃用与变更**:弃用 Node.js 18 和 AMP 支持,调整部分 `next/image` API 并提供迁移指南。
60+
61+
我们致力于让本次更新尽可能平稳顺畅,将谨慎管理变更以减少影响,并提供清晰的迁移指南和工具支持。
62+
63+
[预览新特性](#preview-upcoming-features)
64+
-------------------------------------------------------
65+
66+
您可通过 `canary` 渠道在 `next.config.js` 中启用以下标志,立即体验这些功能:
67+
68+
```ts filename="next.config.ts"
69+
import type { NextConfig } from 'next';
70+
71+
const nextConfig: NextConfig = {
72+
experimental: {
73+
// 将浏览器日志转发至终端便于调试
74+
browserDebugInfoInTerminal: true,
75+
76+
// 启用新型缓存和预渲染行为
77+
dynamicIO: true, // Next.js 16 中将重命名为 cacheComponents
78+
79+
// 激活客户端路由改进
80+
clientSegmentCache: true,
81+
82+
// 通过开发者工具探索路由组合和分段覆盖
83+
devtoolSegmentExplorer: true,
84+
85+
// 支持全局 404 页面定义功能 `global-not-found`
86+
globalNotFound: true,
87+
88+
// 为 turbopack 开发服务器和构建启用持久化缓存
89+
turbopackPersistentCaching: true,
90+
},
91+
};
92+
93+
export default nextConfig;
94+
```
95+
96+
[重要变更](#notable-changes)
97+
-----------------------------------
98+
99+
* [改进] 重定向期间保留 RSC 查询 ([#77963](https://github.com/vercel/next.js/pull/77963))
100+
* [改进] 针对爬虫的优雅错误回退 ([#77916](https://github.com/vercel/next.js/pull/77916))
101+
* [改进] 禁止在客户端组件使用 `unstable_rootParams` ([#79471](https://github.com/vercel/next.js/pull/79471))
102+
* [改进] 修复 `bodySizeLimit` 错误和非多部分操作 ([#77746](https://github.com/vercel/next.js/pull/77746))
103+
* [改进] 对未知操作 ID 返回 404 ([#77012](https://github.com/vercel/next.js/pull/77012))
104+
* [改进] RSC 请求的缓存清除参数检查 ([#80669](https://github.com/vercel/next.js/pull/80669))
105+
* [改进] 升级 Vercel OG 至 0.7.2 ([#81447](https://github.com/vercel/next.js/pull/81447))
106+
* [改进]`assert/strict` 列为外部依赖 ([#80884](https://github.com/vercel/next.js/pull/80884))
107+
* [改进] 传输前从 `FlightRouterState` 移除 searchParam 数据 ([#80734](https://github.com/vercel/next.js/pull/80734))
108+
* [改进] 在顶层渲染流式元数据 ([#80566](https://github.com/vercel/next.js/pull/80566))
109+
* [修复] 克隆配置模块避免突变 ([#80573](https://github.com/vercel/next.js/pull/80573))
110+
* [修复] 传播 `staleTime` 至种子预取条目 ([#81263](https://github.com/vercel/next.js/pull/81263))
111+
* [修复] 恢复 vary 标头 ([#79939](https://github.com/vercel/next.js/pull/79939))
112+
* [修复] 修复 React Compiler 的有效性检测 ([#79558](https://github.com/vercel/next.js/pull/79558))
113+
* [修复] 修复 React Compiler 效用检测器 ([#79480](https://github.com/vercel/next.js/pull/79480))
114+
* [修复] 优化 launchEditor 的边界路径处理 ([#79526](https://github.com/vercel/next.js/pull/79526))
115+
* [修复] 客户端路由应丢弃静态页的陈旧预取条目 ([#79362](https://github.com/vercel/next.js/pull/79362))
116+
* [功能]`router.prefetch` 添加 `onInvalidate` 回调 ([#77880](https://github.com/vercel/next.js/pull/77880))
117+
* [功能]`prefetch="auto"` 添加为 `prefetch={undefined}` 的别名 ([#78689](https://github.com/vercel/next.js/pull/78689))
118+
* [功能] 支持全局 404 页面的元数据 ([#78961](https://github.com/vercel/next.js/pull/78961))
119+
* [功能] 通过错误覆盖层重启开发服务器 ([#80060](https://github.com/vercel/next.js/pull/80060))
120+
* [功能] 通过指示器首选项重启开发服务器 ([#80072](https://github.com/vercel/next.js/pull/80072))
121+
* [功能]`next build` 添加 `--debug-prerender` 选项 ([#80667](https://github.com/vercel/next.js/pull/80667))
122+
* [功能] 将 htmlrewriter 添加至服务器外部依赖 ([#80819](https://github.com/vercel/next.js/pull/80819))
123+
* [功能] 支持部分预渲染拦截的动态路由 ([#80851](https://github.com/vercel/next.js/pull/80851))
124+
* [性能] 在 React Compiler 前使用 SWC 检查文件 ([#75605](https://github.com/vercel/next.js/pull/75605))
125+
* [性能] 优化静态路径生成与参数处理 ([#81254](https://github.com/vercel/next.js/pull/81254))
126+
* [其他] 修复开发环境下 `NEXT_CPU_PROF` 的用法以捕获 CPU 追踪 ([#81248](https://github.com/vercel/next.js/pull/81248))
127+
128+
分享反馈,共同塑造 Next.js 未来:
129+
130+
* [GitHub 讨论区](https://github.com/vercel/next.js/discussions)
131+
* [GitHub Issues](https://github.com/vercel/next.js/issues)
132+
133+
[贡献者](#contributors)
134+
-----------------------------
135+
136+
Next.js 是 3,000 多位开发者的共同成果。本版本由以下成员贡献:
137+
138+
* **Next.js 团队**[Andrew](https://github.com/acdlite), [Ben](https://github.com/bgub), [Hendrik](https://github.com/unstubbable), [Janka](https://github.com/lubieowoce), [Jiachi](https://github.com/huozhi), [Jimmy](https://github.com/feedthejim), [Jiwon](https://github.com/devjiwonchoi), [JJ](https://github.com/ijjk), [Josh](https://github.com/gnoff), [Jude](https://github.com/gao_jude), [Rob](https://github.com/robpruzan), [Sam](https://x.com/samselikoff), [Sebastian](https://github.com/sebmarkbage), [Sebbie](https://github.com/eps1lon), [Wyatt](https://github.com/wyattjoh), [Zack](https://github.com/ztanner)
139+
* **Turbopack 团队**[Benjamin](https://github.com/bgw), [Donny](https://github.com/kdy1), [Josh](https://github.com/Cy-Tek), [Luke](https://github.com/lukesandberg), [Maia](https://github.com/padmaia), [Niklas](https://github.com/mischnic), [Tim](https://github.com/timneutkens), [Tobias](https://github.com/sokra), [Will](https://github.com/wbinnssmith)
140+
* **Next.js 文档团队**[Delba](https://github.com/delbaoliveira), [Rich](https://github.com/molebox), [Ismael](https://github.com/ismaelrumzan), [Joseph](https://github.com/icyJoseph), [Lee](https://github.com/leerob)
141+
142+
特别鸣谢 @sokra, @huozhi, @Marukome0743, @mischnic, @wbinnssmith, @eps1lon, @razzeee, @delbaoliveira, @kdy1, @wyattjoh, @acdlite, @ztanner, @bgw, @jantimon, @lubieowoce, @Fonger, @ospira, @gnoff, @styfle, @Cy-Tek, @timneutkens, @raunofreiberg, @devchaudhary24k, @Neschadin, @OreQr, @drewlong314, @ijjk, @praizjosh, @unstubbable, @lukesandberg, @ScriptedAlchemy, @sqidermad, @Juneezee, @devjiwonchoi, @Kamitenshi, @feedthejim, @leerob, @mauerbac, @miki-tebe, @gaearon, @mrbadri, @luwes, @lucacasonato, @M4xymm, @jirihofman, @vicb, @jackwilson323, @SyMind, @kevva, @xyf7, @gaojude, @dario-piotrowicz, @mastoj, @nicole0707, @lourd, @Karibash, @chipit24, @icyJoseph, @xusd320, @fireairforce, @GenhaoLi, @igas, @Macw07, @amannn, @bcdipesh, @r34son, @ivasilov, @lpalmes, @imskyleen, @teamleaderleo, @vitaliemiron, @agadzik, @chdeskur, @nakanoh, @luiscobot, @GameRoMan, @dferber90, @maurobonfietti, @navandstokes, @sajadtorkamani, @bobziroll, @lumirlumir, @KkOoSsTtAa, @msabramo, @sommeeeer, @schoenwaldnils, @remcohaszing, @HerringtonDarkholme, @bgub, @RobPruzan, @lmammino, @MohammedYehia, @extoci, @padmaia, @aacosta11, @vercel-release-bot, @maral, @ethanniser, @MichalMoravik, @rajrawat37, @kidonng, @dnhn, @kristian240, @rachnac-emeritus, @rortan134, @nick20name17 的贡献!
Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
---
2-
source-updated-at: 2025-05-16T04:52:11.000Z
3-
translation-updated-at: 2025-05-19T22:58:54.772Z
4-
title: 应用路由 (App Router)
5-
description: 应用路由 (App Router) 是基于文件系统的路由,它利用了 React 的最新特性,如服务端组件 (Server Components)、Suspense、服务端函数 (Server Functions) 等。
2+
source-updated-at: 2025-08-09T22:43:53.000Z
3+
translation-updated-at: 2025-08-09T22:59:20.432Z
4+
title: App 路由 (App Router)
5+
description: 基于文件系统的路由,使用 React 的最新特性包括服务端组件 (Server Components)、Suspense 和服务器函数 (Server Functions) 等。
66
related:
7-
title: 后续步骤
8-
description: 请按照安装指南开始使用
7+
title: 下一步 (Next Steps)
8+
description: 学习构建 App 路由项目的基础知识,涵盖从安装到布局、导航、服务端与客户端组件等环节
99
links:
1010
- app/getting-started/installation
11+
- app/getting-started/project-structure
12+
- app/getting-started/layouts-and-pages
13+
- app/getting-started/linking-and-navigating
14+
- app/getting-started/server-and-client-components
1115
---
1216

13-
**应用路由 (App Router)** 是一个基于文件系统的路由,它利用了 React 的最新特性,[服务端组件 (Server Components)](https://react.dev/reference/rsc/server-components)[Suspense](https://react.dev/reference/react/Suspense) [服务端函数 (Server Functions)](https://react.dev/reference/rsc/server-functions)
17+
**App 路由 (App Router)** 是基于文件系统的路由方案,它运用了 React 的最新特性,例如[服务端组件 (Server Components)](https://react.dev/reference/rsc/server-components)[Suspense](https://react.dev/reference/react/Suspense)[服务器函数 (Server Functions)](https://react.dev/reference/rsc/server-functions)
Lines changed: 88 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
---
2-
source-updated-at: 2025-05-16T04:52:11.000Z
3-
translation-updated-at: 2025-05-19T22:46:16.967Z
2+
source-updated-at: 2025-08-09T22:43:53.000Z
3+
translation-updated-at: 2025-08-09T23:01:24.991Z
44
title: 支持的浏览器
5-
description: Next.js 支持的浏览器及 JavaScript 功能特性
5+
description: Next.js 的浏览器支持情况以及所支持的 JavaScript 功能
66
---
77

8-
Next.js 开箱即用支持**现代浏览器**,无需额外配置
8+
Next.js **零配置**支持所有现代浏览器
99

1010
- Chrome 64+
1111
- Edge 79+
1212
- Firefox 67+
1313
- Opera 51+
1414
- Safari 12+
1515

16-
## 浏览器列表 (Browserslist)
16+
## Browserslist
1717

18-
如需针对特定浏览器或功能进行适配,Next.js 支持在 `package.json` 中配置 [Browserslist](https://browsersl.ist)。默认使用以下配置:
18+
如需针对特定浏览器或功能,Next.js 支持在 `package.json` 文件中配置 [Browserslist](https://browsersl.ist)。默认使用以下配置:
1919

2020
```json filename="package.json"
2121
{
@@ -29,40 +29,108 @@ Next.js 开箱即用支持**现代浏览器**,无需额外配置:
2929
}
3030
```
3131

32-
## 垫片 (Polyfills)
32+
## Polyfill(垫片)
3333

34-
我们自动注入了[广泛使用的垫片](https://github.com/vercel/next.js/blob/canary/packages/next-polyfill-nomodule/src/index.js),包括:
34+
我们自动注入[常用 Polyfill](https://github.com/vercel/next.js/blob/canary/packages/next-polyfill-nomodule/src/index.js),包括:
3535

3636
- [**fetch()**](https://developer.mozilla.org/docs/Web/API/Fetch_API) — 替代方案:`whatwg-fetch``unfetch`
37-
- [**URL**](https://developer.mozilla.org/docs/Web/API/URL) — 替代方案:[Node.js 的 `url`](https://nodejs.org/api/url.html)
38-
- [**Object.assign()**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) — 替代方案:`object-assign``object.assign``core-js/object/assign`
37+
- [**URL**](https://developer.mozilla.org/docs/Web/API/URL) — 替代方案:[`url` (Node.js API)](https://nodejs.org/api/url.html)
38+
- [**Object.assign()**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) — 替代方案:`object-assign`, `object.assign`,`core-js/object/assign`
3939

40-
如果依赖项中已包含这些垫片,生产构建时会自动去重以避免重复加载
40+
如果依赖项包含这些 Polyfill,生产构建时会自动剔除以避免重复
4141

42-
此外,为减少包体积,Next.js 只会为需要垫片的浏览器加载它们。全球大部分网络流量不会下载这些垫片。
42+
为减少打包体积,Next.js 仅对需要 Polyfill 的浏览器加载这些文件。全球大部分网络流量不会下载这些垫片。
4343

44-
### 自定义垫片
44+
### 自定义 Polyfill
4545

46-
如果您的代码或外部 npm 依赖需要目标浏览器不支持的功能(如 IE 11),需自行添加垫片
46+
若您的代码或外部 npm 依赖需要目标浏览器不支持的功能(如 IE 11),需自行添加 Polyfill
4747

48-
此时应在[自定义 `<App>`](/docs/pages/building-your-application/routing/custom-app) 或具体组件中**按需导入**特定垫片。
48+
#### 在 App Router 中
49+
50+
通过 [`instrumentation-client.js` 文件](/docs/app/api-reference/file-conventions/instrumentation-client)导入 Polyfill:
51+
52+
```ts filename="instrumentation-client.ts"
53+
import './polyfills'
54+
```
55+
56+
#### 在 Pages Router 中
57+
58+
[自定义 `<App>`](/docs/pages/building-your-application/routing/custom-app) 或独立组件顶部导入**特定 Polyfill**
59+
60+
```tsx filename="pages/_app.tsx" switcher
61+
import './polyfills'
62+
63+
import type { AppProps } from 'next/app'
64+
65+
export default function MyApp({ Component, pageProps }: AppProps) {
66+
return <Component {...pageProps} />
67+
}
68+
```
69+
70+
```jsx filename="pages/_app.jsx" switcher
71+
import './polyfills'
72+
73+
export default function MyApp({ Component, pageProps }) {
74+
return <Component {...pageProps} />
75+
}
76+
```
77+
78+
#### 条件加载 Polyfill
79+
80+
最佳实践是将不兼容功能隔离到特定 UI 区域,按需加载 Polyfill:
81+
82+
```ts filename="hooks/analytics.ts" switcher
83+
import { useCallback } from 'react'
84+
85+
export const useAnalytics = () => {
86+
const tracker = useCallback(async (data: unknown) => {
87+
if (!('structuredClone' in globalThis)) {
88+
import('polyfills/structured-clone').then((mod) => {
89+
globalThis.structuredClone = mod.default
90+
})
91+
}
92+
93+
/* 执行需使用 structuredClone 的操作 */
94+
}, [])
95+
96+
return tracker
97+
}
98+
```
99+
100+
```js filename="hooks/analytics.js" switcher
101+
import { useCallback } from 'react'
102+
103+
export const useAnalytics = () => {
104+
const tracker = useCallback(async (data) => {
105+
if (!('structuredClone' in globalThis)) {
106+
import('polyfills/structured-clone').then((mod) => {
107+
globalThis.structuredClone = mod.default
108+
})
109+
}
110+
111+
/* 执行需使用 structuredClone 的操作 */
112+
}, [])
113+
114+
return tracker
115+
}
116+
```
49117

50118
## JavaScript 语言特性
51119

52-
Next.js 默认支持最新 JavaScript 特性。除 [ES6 功能](https://github.com/lukehoban/es6features)外,还包括:
120+
Next.js 默认支持最新 JavaScript 特性。除 [ES6 特性](https://github.com/lukehoban/es6features)外,还包括:
53121

54122
- [Async/await](https://github.com/tc39/ecmascript-asyncawait) (ES2017)
55-
- [对象展开/剩余属性](https://github.com/tc39/proposal-object-rest-spread) (ES2018)
123+
- [对象展开运算符](https://github.com/tc39/proposal-object-rest-spread) (ES2018)
56124
- [动态 `import()`](https://github.com/tc39/proposal-dynamic-import) (ES2020)
57125
- [可选链](https://github.com/tc39/proposal-optional-chaining) (ES2020)
58126
- [空值合并](https://github.com/tc39/proposal-nullish-coalescing) (ES2020)
59127
- [类字段](https://github.com/tc39/proposal-class-fields)[静态属性](https://github.com/tc39/proposal-static-class-features) (ES2022)
60-
- 以及其他特性
128+
- 更多特性
61129

62-
### TypeScript 特性
130+
### TypeScript 支持
63131

64132
Next.js 内置 TypeScript 支持。[了解更多](/docs/pages/api-reference/config/typescript)
65133

66134
### 自定义 Babel 配置(高级)
67135

68-
可自定义 Babel 配置。[详见此处](/docs/pages/guides/babel)
136+
可自定义 Babel 配置。[详见指南](/docs/pages/guides/babel)

0 commit comments

Comments
 (0)