在 Netlify 上使用 Next.js

Netlify 的 Next.js 适配器会自动为 Netlify 站点配置关键功能，包括缓存控制、按需重新验证和图片优化。

该适配器会预置 Netlify Functions 来处理站点的服务端功能（如 SSR、ISR 和 PPR 页面、API 端点、Server Actions 等），并使用 Netlify Edge Functions 来处理 Edge Middleware，确保功能开箱即用。

我们使用框架自身的全面端到端测试，自动验证与最新稳定版 Next.js 的兼容性。要查看最新的测试结果，请使用上方的徽章。

快速开始

最简单的入门方式是将我们的 Next.js 平台启动模板部署到您的 Netlify 账户。使用下面的按钮开始部署。

App Router: Netlify 全面支持 Next.js 的 App Router，该路由支持更强大的嵌套布局和 React 最新特性，如 Server Components 和 Streaming。
自动细粒度缓存: 适配器在 Netlify 上使用细粒度缓存来支持 Next.js 的全路由缓存(Full Route Cache)和数据缓存(Data Cache)。这意味着静态页面响应会自动缓存在边缘节点，并可按路径或标签重新验证。
按需与基于时间的重新验证: App Router 和 Pages Router 都支持按需和基于时间的重新验证，允许您在部署后随时重新验证和重新生成内容。
图片优化: next/image 组件默认使用 Netlify Image CDN (opens in a new tab) 来确保您的图片以最高效的格式进行优化和交付。

请注意，虽然我们通常也会从早期阶段就支持实验性功能(例如 Partial Prerendering)，但这些功能在框架层面尚未被视为稳定功能。

Netlify 会自动检测您正在使用 Next.js，并为您的站点配置最新版本的适配器。

要将 Netlify Next.js 适配器固定到特定版本，请参阅 Netlify 文档 (opens in a new tab)。

目前 Netlify 的 Next.js 适配器存在以下限制：

设置为 edge 运行时的 SSR 页面将在你的函数区域 (opens in a new tab) 运行。 如果边缘级性能至关重要，我们建议你改用带有边缘函数的静态页面。这些页面在源站渲染，但会被缓存在边缘节点，并可按需重新验证。
Next.js 配置中的重写规则不能指向 public 目录中的静态文件。 如果在 next.config.js 中创建 beforeFiles 重写规则，它们不能指向站点 public 目录中的静态文件。你可以使用中间件重写作为替代方案。
头部和重定向规则在中间件之后执行。 如果需要保持 Next.js 文档 (opens in a new tab) 中指定的执行顺序，你需要使用我们的平台原生功能在 Next.js 之外配置头部 (opens in a new tab) 和重定向 (opens in a new tab)。
Netlify Forms 兼容性： 当前适配器与 Netlify Forms 配合使用需要变通方案。

如果你计划使用 pnpm 与 Next.js 来管理依赖项，必须执行以下操作之一：

设置一个值为 --shamefully-hoist 的 PNPM_FLAGS 环境变量 (opens in a new tab)。这会在 Netlify 运行的 pnpm install 命令后附加 --shamefully-hoist 参数。
启用公共提升 (opens in a new tab)，方法是在项目根目录添加包含以下内容的 .npmrc 文件：
```
public-hoist-pattern[]=*
```

OpenNext 文档专门针对 Netlify 的 Next.js 适配器 v5 及更高版本。如需了解旧版本适配器的信息，请参阅 Netlify 文档 (opens in a new tab)。

如果您需要任何版本适配器的帮助，请访问我们的支持页面 (opens in a new tab)，获取多种寻找答案和获得帮助的方法。