如何构建 next.js 项目并将其手动部署到 Netlify？

Question

根据文档，Netlify 通过 Essential Build Plugin 支持 next.js 并通过 CLI command 支持手动部署，但是我如何将两者结合使用在我自己的 CI 中构建 next.js 项目并仅部署构建输出到 Netlify？

插件页面提到了“链接”，即它假定项目是通过 Git 存储库连接并由 netlify 构建的，而不是由我自己的 CI 在本地构建的。

Answer 1

好的，终于搞定了。总结一下，以防其他人发现它有用：

• 安装包netlify-cli和@netlify/plugin-nextjs
• 在项目根目录中创建netlify.toml，如插件自述文件的this 部分所述（确保有publish 和functions 的路径；服务器端渲染和API 需要functions处理程序；两个目录都将在构建期间用于构建输出）
• 如果使用 Git，请将路径和 .netlify（另一个“临时”目录）添加到 .gitignore，以从您的存储库中排除构建输出
• 重要（找到信息in the documentation of the former/outdated next-on-netlify project，没有这个就无法部署）：将target: "experimental-serverless-trace" 添加到next.config.js
• 对于初始设置：netlify login 到您的帐户，运行一次 netlify deploy --build，选择一个站点名称
• 如果要在 CI 中运行部署，请配置环境变量 NETLIFY_AUTH_TOKEN（带有来自 Netlify UI 的“个人访问令牌”）和 NETLIFY_SITE_ID（在选择名称并成功完成后显示在 Netlify UI 中第一次成功部署）以在未来绕过登录和站点选择

Answer 2

安装 netlify-cli 和 @netlify/plugin-nextjs

yarn add -D @netlify/plugin-nextjs
yarn add -D @netlify/plugin-nextjs

---

设置netlify.toml 文件

[[plugins]]
package = "@netlify/plugin-nextjs"

[build]
command = "yarn next build"
publish = ".next"

---

配置NETLIFY_AUTH_TOKEN和NETLIFY_SITE_ID环境变量

在您的 Netlify 用户设置中为 Personal access tokens 手动生成访问令牌。这也可以通过command line 来完成。在终端设置或持续集成 (CI) 工具的 UI 中将令牌另存为 NETLIFY_AUTH_TOKEN 环境变量。

站点 ID 在 Netlify UI 中找到：转到站点设置 > 常规 > 站点详细信息 > 站点信息，然后复制 API ID 的值，将 ID 分配给 NETLIFY_SITE_ID 环境多变的。这也可以通过netlify link 命令来完成。

---

构建您的 Next.js 应用程序并将其部署到 Netlify

​​>

netlify deploy --build --prod

---

---

文档

• https://docs.netlify.com/configure-builds/file-based-configuration/
• https://github.com/netlify/netlify-plugin-nextjs
• https://docs.netlify.com/cli/get-started/#run-builds-locally
• https://docs.netlify.com/cli/get-started/#manual-deploys

更长的文章

https://paulonteri.com/thoughts/deploy-nextjs-to-netlify-manually