Next.js · 最新版
文档列表
app
应用路由
App 路由器是一个基于文件系统的路由器，它利用了 React 的最新特性，例如服务器组件、Suspense、服务器函数等。
API 参考
Next.js App Router 的 API 参考。
命令行界面
Next.js 命令行界面 (CLI) 工具的 API 参考。
create-next-app
通过 create-next-app CLI，仅需一条命令即可创建 Next.js 应用程序。
next CLI
了解如何使用 Next.js 命令行界面运行和构建您的应用程序。
组件
Next.js 内置组件的 API 参考。
字体模块
使用内置的 `next/font` 加载器优化 Web 字体的加载。
表单组件
学习如何使用 `<Form>` 组件来处理表单提交以及通过客户端导航更新搜索参数。
图片组件
使用内置的 [`next/image` 组件]在您的 Next.js 应用中优化图片。
Link 组件
使用内置的 `next/link` 组件，实现快速的客户端导航。
脚本组件
使用内置的 `next/script` 组件，在您的 Next.js 应用程序中优化第三方脚本。
配置
学习如何配置 Next.js 应用程序。
ESLint 插件
学习如何使用和配置 ESLint 插件，以捕获 Next.js 应用程序中的常见问题和错误。
next.config.js
了解如何使用 next.config.js 配置您的应用程序。
experimental.adapterPath
配置用于 Next.js 的自定义适配器，以便通过 `modifyConfig` 和 `onBuildComplete` 回调介入构建过程。
allowedDevOrigins
使用 `allowedDevOrigins` 来配置可以请求开发服务器的额外源。
appDir
启用 App Router 以使用布局、流式传输等功能。
资产前缀
学习如何使用 assetPrefix 配置选项来配置你的 CDN。
认证中断
了解如何启用实验性的 `authInterrupts` 配置选项，以使用 `forbidden` 和 `unauthorized`。
基础路径
使用 ``basePath`` 将 Next.js 应用部署到域名的子路径下。
browserDebugInfoInTerminal
在开发过程中，将浏览器控制台日志和错误转发到你的终端。
缓存组件
学习如何在 Next.js 中启用 cacheComponents 标志。
缓存处理器
配置自定义缓存处理器，用于 Next.js 中的缓存指令。
缓存寿命
了解如何在 Next.js 中设置 cacheLife 配置。
压缩
Next.js 提供 gzip 压缩来压缩渲染内容和静态文件，它仅适用于服务器目标。在此处了解更多信息。
跨域
使用 `crossOrigin` 选项，在由 `next/script` 生成的 `script` 标签上添加一个 crossOrigin 标签。
CSS 分块
使用 `cssChunking` 选项来控制 Next.js 应用程序中 CSS 文件的分块方式。
开发指示器
用于屏幕指示器的配置选项，该指示器在开发过程中提供关于当前正在查看路由的上下文信息。
distDir
设置一个自定义的构建目录，以替代默认的 `.next` 目录。
环境
了解如何在构建时在 Next.js 应用中添加和访问环境变量。
expireTime
为启用 ISR 的页面自定义 stale-while-revalidate 过期时间。
exportPathMap
自定义在使用 `next export` 时，将导出为 HTML 文件的页面。
generateBuildId
配置构建 ID，它用于标识您的应用程序正在提供服务的当前构建。
生成 ETag
Next.js 默认情况下会为每个页面生成 etag。在此处了解有关如何禁用 etag 生成的更多信息。
头部
为您的 Next.js 应用添加自定义 HTTP 头。
HTML受限机器人
指定应接收阻塞元数据的用户代理列表。
httpAgentOptions
Next.js 将默认自动使用 HTTP Keep-Alive。在此处了解有关如何禁用 HTTP Keep-Alive 的更多信息。
图片
针对 `next/image` 加载器的自定义配置
自定义 Next.js 缓存处理器
配置 Next.js 缓存，用于存储和重新验证数据，以便使用任何外部服务，例如 Redis、Memcached 或其他服务。
内联 CSS
启用内联 CSS 支持。
isolatedDevBuild
使用隔离的构建输出用于开发服务器，以防止与生产构建发生冲突。
日志记录
配置在开发模式下运行 Next.js 时，数据获取如何被记录到控制台。
mdxRs
使用新的 Rust 编译器在 App Router 中编译 MDX 文件。
按需条目
配置 Next.js 在开发环境中如何释放和保留内存中的页面。
优化包导入
optimizePackageImports Next.js 配置选项的 API 参考
请提供您想要翻译的英文技术文档内容。目前您只提供了“output”这个词，无法进行完整的翻译。
Next.js 自动追踪每个页面所需的文件，以便于您应用程序的轻松部署。在此了解其工作原理。
pageExtensions
扩展 Next.js 在 Pages 路由器中解析页面时使用的默认页面扩展名。
“Powered By”页眉
Next.js 默认会添加 `x-powered-by` 标头。在此处了解如何选择退出它。
生产环境浏览器源映射
在生产构建期间启用浏览器源映射生成。
proxyClientMaxBodySize
配置使用代理时的最大请求体大小。
reactCompiler
启用 React 编译器以自动优化组件渲染。
reactMaxHeadersLength
由 React 发出并添加到响应中的标头的最大长度。
React 严格模式
完整的 Next.js 运行时现在已符合严格模式，了解如何选择启用。
重定向
将重定向添加到您的 Next.js 应用。
重写
向你的 Next.js 应用添加重写。
Sass 选项
配置 Sass 选项。
服务器操作
配置您的 Next.js 应用中的 Server Actions 行为。
服务器组件 HMR 缓存
配置服务器组件中的 fetch 响应是否在 HMR 刷新请求之间进行缓存。
serverExternalPackages
从服务器组件打包中排除特定依赖，并使用原生的 Node.js `require`。
陈旧时间
学习如何覆盖客户端路由器缓存的失效时间。
静态生成*
学习如何在你的 Next.js 应用中配置静态生成。
污点
启用对象和值的污染。
尾部斜杠
配置 Next.js 页面，使其在有或没有尾部斜杠的情况下解析。
转译包
自动转译和打包来自本地包（例如 monorepos）或来自外部依赖项 (`node_modules`) 的依赖项。
turbopack
为 Next.js 配置 Turbopack 专用选项
Turbopack 文件系统缓存
学习如何为 Turbopack 构建启用文件系统缓存
类型化路由
启用对静态类型链接的支持。
TypeScript
Next.js 默认会报告 TypeScript 错误。在此处了解如何禁用此行为。
URL 导入
配置 Next.js 以允许从外部 URL 导入模块。
useLightningcss
启用 Lightning CSS 的实验性支持。
视图过渡
在 App Router 中启用 React 的 ViewTransition API
自定义 Webpack 配置
了解如何自定义 Next.js 使用的 webpack 配置
Web Vitals 归因
了解如何使用 `webVitalsAttribution` 选项来查明 Web Vitals 问题的来源。
TypeScript
Next.js 为构建您的 React 应用程序提供了一种 TypeScript 优先的开发体验。
指令
指令用于修改您的 Next.js 应用程序的行为。
使用缓存
了解如何使用 `use cache` 指令在您的 Next.js 应用程序中缓存数据。
use cache: private
了解如何在您的 Next.js 应用程序中使用 `"use cache: private"` 指令，以启用个性化内容的运行时预取。
use cache: remote
学习如何使用 `"use cache: remote"` 指令，在您的 Next.js 应用程序的动态上下文中启用缓存。
use client
学习如何使用 `use client` 指令在客户端渲染组件。
use server
了解如何使用 `use server` 指令在服务器上执行代码。
Edge 运行时
边缘运行时的 API 参考。
文件系统约定
Next.js 文件系统约定的 API 参考。
default.js
`default.js` 文件的 API 参考。
动态路由段
动态路由段可用于从动态数据编程生成路由段。
error.js
`error.js` 特殊文件的 API 参考。
forbidden.js
`forbidden.js` 特殊文件的 API 参考。
instrumentation.js
instrumentation.js 文件的 API 参考。
instrumentation-client.js
了解如何添加客户端埋点，以跟踪和监控您的 Next.js 应用程序的前端性能。
拦截路由
使用拦截路由在当前布局中加载新路由，同时隐藏浏览器 URL，适用于高级路由模式，例如模态框。
layout.js
`layout.js` 文件的 API 参考。
loading.js
loading.js 文件的 API 参考。
mdx-components.js
API 参考：`mdx-components.js` 文件。
元数据文件 API 参考
API 文档：元数据文件约定。
favicon、图标 和 Apple 图标
Favicon、Icon 和 Apple Icon 文件约定的 API 参考
manifest.json
manifest.json 文件的 API 参考
opengraph-image 和 twitter-image
Open Graph Image 和 Twitter Image 文件约定的 API 参考
robots.txt
`robots.txt` 文件的 API 参考
sitemap.xml
sitemap.xml 文件的 API 参考。
not-found.js
not-found.js 文件的 API 参考。
page.js
page.js 文件的 API 参考。
并行路由
在同一视图中同时渲染一个或多个可独立导航的页面。这是一种适用于高动态性应用的模式。
proxy.js
proxy.js 文件的 API 参考。
public 文件夹
Next.js 支持在 public 目录中提供静态文件，例如图片。您可以在此处了解其工作原理。
route.js
针对 `route.js` 特殊文件的 API 参考。
路由组
路由组可用于将您的 Next.js 应用划分为不同的部分。
路由段配置
了解如何配置 Next.js 路由段的选项。
src 文件夹
将页面保存在 `src` 文件夹下，作为根 `pages` 目录的替代方案。
template.js
template.js 文件的 API 参考
unauthorized.js
unauthorized.js 特殊文件的 API 参考。
函数
Next.js 函数和 Hook API 参考
之后
after 函数的 API 参考。
cacheLife
学习如何使用 cacheLife 函数来设置已缓存函数或组件的缓存过期时间。
缓存标签
了解如何在您的 Next.js 应用程序中使用 `cacheTag` 函数来管理缓存失效。
连接
连接函数的 API 参考
Cookie
`cookies` 函数的 API 参考。
草稿模式
draftMode 函数的 API 参考
获取
扩展的 fetch 函数的 API 参考。
禁止
禁用函数的 API 参考。
生成图像元数据
学习如何在单个 Metadata API 特殊文件中生成多张图片。
生成META数据
学习如何为你的 Next.js 应用添加元数据，以提高搜索引擎优化 (SEO) 和网络可分享性。
生成站点地图
学习如何使用 `generateSiteMaps` 函数为您的应用程序创建多个站点地图。
生成静态参数
`generateStaticParams` 函数的 API 参考。
生成视口
`generateViewport` 函数的 API 参考
请求头
headers 函数的 API 参考。
图像响应
`ImageResponse` 构造函数的 API 参考。
NextRequest
NextRequest 的 API 参考
NextResponse
NextResponse API 参考
未找到
`notFound` 函数的 API 参考。
永久重定向
`permanentRedirect` 函数的 API 参考。
重定向
redirect 函数的 API 参考
刷新
刷新函数的 API 参考。
revalidatePath
`revalidatePath` 函数的 API 参考。
重新验证标签
`revalidateTag` 函数的 API 参考
未经授权
unauthorized 函数的 API 参考
unstable_cache
`unstable_cache` 函数的 API 参考
unstable_noStore
用于 `unstable_noStore` 函数的 API 参考
unstable_rethrow
API 参考：unstable_rethrow 函数
updateTag
updateTag 函数的 API 参考。
useLinkStatus
useLinkStatus Hook 的 API 参考
useParams
useParams 钩子的 API 参考
usePathname
`usePathname` 钩子的 API 参考
useReportWebVitals
useReportWebVitals 函数的 API 参考。
useRouter
`useRouter` 钩子的 API 参考
useSearchParams
`useSearchParams` Hook 的 API 参考
useSelectedLayoutSegment
`useSelectedLayoutSegment` 钩子的 API 参考。
使用选定的布局片段
`useSelectedLayoutSegments` 钩子的 API 参考。
用户代理
`userAgent` 辅助函数扩展了 Web 请求 API，为其提供了额外的属性和方法，以便与请求中的用户代理对象进行交互。
Turbopack
Turbopack 是一个增量打包器，为 JavaScript 和 TypeScript 优化，用 Rust 编写，并内置于 Next.js 中。
入门
学习如何使用 Next.js App Router 创建全栈 Web 应用程序。
缓存组件
了解如何使用缓存组件，并结合静态渲染和动态渲染的优势。
缓存与重新验证
了解如何在应用程序中缓存和重新验证数据。
CSS
了解向应用添加 CSS 的各种方式，包括 Tailwind CSS、CSS Modules、Global CSS 等。
部署
学习如何部署您的 Next.js 应用程序。
错误处理
学习如何显示预期错误和处理未捕获的异常。
获取数据
学习如何获取数据以及流式传输依赖于数据的内容。
字体优化
学习如何在 Next.js 中优化字体
图片优化
学习如何在 Next.js 中优化图片
安装
了解如何使用 `create-next-app` CLI 创建新的 Next.js 应用程序，并设置 TypeScript、ESLint 和模块路径别名。
布局和页面
学习如何创建您的首个页面和布局，以及如何使用 Link 组件在它们之间进行链接。
链接与导航
了解内置导航优化（包括预取、预渲染和客户端导航）是如何工作的，以及如何针对动态路由和慢速网络优化导航。
元数据和 OG 图像
学习如何为页面添加元数据并创建动态 OG 图像。
项目结构和组织
学习 Next.js 中的文件夹和文件约定，以及如何组织你的项目。
代理
学习如何使用代理
路由处理器
学习如何使用路由处理器
服务器组件和客户端组件
学习如何使用 React 服务器组件和客户端组件，在服务器或客户端上渲染应用程序的不同部分。
更新数据
学习如何使用服务端函数修改数据。
升级
了解如何将您的 Next.js 应用程序升级到最新版本或 canary 版本。
指南
学习如何使用 Next.js 实现常见模式和真实世界的用例
如何为你的 Next.js 应用程序添加分析功能
测量和跟踪页面性能，使用 Next.js Speed Insights
如何在 Next.js 中实现身份验证
学习如何在你的 Next.js 应用程序中实现身份验证。
如何使用 Next.js 作为你的前端的后端
学习如何使用 Next.js 作为后端框架
caching
Next.js 中的缓存机制概述
如何配置持续集成 (CI) 构建缓存
学习如何配置 CI 来缓存 Next.js 构建
如何为您的 Next.js 应用程序设置内容安全策略 (CSP)
学习如何为您的 Next.js 应用程序设置内容安全策略 (CSP)。
如何使用 CSS-in-JS 库
在 Next.js 中使用 CSS-in-JS 库
如何在 Next.js 中配置自定义服务器
通过自定义服务器以编程方式启动 Next.js 应用。
如何在 Next.js 中思考数据安全
了解 Next.js 中的内置数据安全功能，并学习保护应用程序数据的最佳实践。
如何在 Next.js 中使用调试工具
学习如何使用 VS Code、Chrome 开发者工具或 Firefox 开发者工具调试你的 Next.js 应用程序。
如何在 Next.js 中使用草稿模式预览内容
Next.js 提供了预览模式，可在静态页面和动态页面之间进行切换。你可以在此处了解它与 App Router 的工作原理。
如何在 Next.js 中使用环境变量
学习如何在 Next.js 应用中添加和访问环境变量。
如何使用 Server Actions 创建表单
学习如何在 Next.js 中使用 React 服务端 Actions 创建表单。
如何实现增量静态再生 (ISR)
学习如何使用增量静态再生在运行时创建或更新静态页面。
如何设置埋点
学习如何在 Next.js 应用中使用代码检测在服务器启动时运行代码
国际化
添加对多种语言的支持，包括国际化路由和本地化内容。
如何在 Next.js 应用中实现 JSON-LD
学习如何将 JSON-LD 添加到您的 Next.js 应用程序中，以便向搜索引擎和人工智能描述您的内容。
如何懒加载客户端组件和库
懒加载导入的库和 React 组件，以提升应用程序的加载性能。
如何优化本地开发环境
学习如何使用 Next.js 优化你的本地开发环境。
启用 Next.js MCP 服务器用于编码代理
学习如何使用 Next.js MCP 支持，以允许编码代理访问您的应用程序状态
如何在 Next.js 中使用 markdown 和 MDX
学习如何配置 MDX 并在你的 Next.js 应用中使用它。
如何优化内存使用
优化应用程序在开发和生产环境中使用的内存。
迁移
学习如何从流行框架迁移到 Next.js
如何从 Pages 迁移到 App Router
学习如何将您现有的 Next.js 应用从 Pages 路由升级到 App 路由。
如何从 Create React App 迁移到 Next.js
学习如何将你现有的 React 应用从 Create React App 迁移到 Next.js。
如何从 Vite 迁移到 Next.js
了解如何将您现有的 React 应用程序从 Vite 迁移到 Next.js。
如何在 Next.js 中构建多租户应用
学习如何使用 App Router 构建多租户应用。
如何使用多区域和 Next.js 构建微前端
学习如何使用 Next.js Multi-Zones 构建微前端，以便在单个域名下部署多个 Next.js 应用。
如何使用 OpenTelemetry 设置仪表化
学习如何使用 OpenTelemetry 仪表化您的 Next.js 应用。
如何优化包打包
学习如何优化您的应用程序的服务器和客户端捆绑包。
预加载
学习如何在 Next.js 中配置预取。
如何针对生产环境优化你的 Next.js 应用
在 Next.js 应用投入生产环境之前，为确保最佳性能和用户体验，我们提供以下建议。
如何使用 Next.js 构建渐进式 Web 应用 (PWA)
学习如何使用 Next.js 构建一个渐进式 Web 应用程序 (PWA)。
如何在 Next.js 中处理重定向
了解在 Next.js 中处理重定向的不同方式。
如何使用 Sass
使用 Sass 为你的 Next.js 应用程序添加样式。
如何加载和优化脚本
使用内置的 `Script` 组件优化第三方脚本。
如何自行托管您的 Next.js 应用程序
学习如何将 Next.js 应用程序自托管到 Node.js 服务器、Docker 镜像或静态 HTML 文件（静态导出）上。
如何使用 Next.js 构建单页应用程序
Next.js 完全支持构建单页应用程序 (SPA)。
如何创建您的 Next.js 应用的静态导出
Next.js 支持以静态网站或单页应用 (SPA) 的形式开始，然后可以选择性地升级以使用需要服务器的功能。
如何在 Next.js 应用程序中安装 Tailwind CSS v3
使用 Tailwind CSS v3 为您的 Next.js 应用设置样式，以提供更广泛的浏览器支持。
测试
了解如何使用四种常用的测试工具——Cypress、Playwright、Vitest 和 Jest——来设置 Next.js。
如何在 Next.js 中设置 Cypress
学习如何为 Next.js 设置 Cypress，以进行端到端 (E2E) 和组件测试。
如何在 Next.js 中设置 Jest
学习如何配置 Jest 与 Next.js，用于单元测试和快照测试。
如何设置 Playwright 与 Next.js
了解如何设置 Playwright 与 Next.js 以进行端到端 (E2E) 测试。
如何在 Next.js 中设置 Vitest
学习如何为 Next.js 配置 Vitest 以进行单元测试。
如何优化第三方库
使用 `@next/third-parties` 包优化应用中第三方库的性能。
升级指南
了解如何升级到最新版本的 Next.js。
代码修改器
在新功能发布时，使用 codemods 升级您的 Next.js 代码库。
如何升级至版本 14
将您的 Next.js 应用从版本 13 升级到 14。
如何升级到版本 15
将您的 Next.js 应用从版本 14 升级到 15。
如何升级到版本 16
将您的 Next.js 应用程序从版本 15 升级到 16。
如何使用和优化视频
在您的 Next.js 应用程序中优化视频的建议与最佳实践。