最近下载一个 Next.js 博客应用，想修改一下自己用。部署到哪里大家在国内都能访问呢？第一想到的就是 Netlify。Netlify 推荐的是将网站链接到一个 Git 仓库，用于持续部署（CI）。不过我不打算使用这种自动部署方式。那么如何手动部署 Next.js 网站呢？ Netlify 的文档写得并不清楚，我找了好久终于找到了方案，如果您想直接看答案，可以跳过看文章最后的总结。
为什么使用 Netlify CLI 部署？
- Git 很多时候在国内连接不稳定，不时会 push 失败。
- 更重要的是，不想暴露 md 文件，因为有些人不讲“武德”，随意将您的博文“CV”了去。
怎样部署？
- 注册账号
- 安装 Netlify CLI
npm i -g netlify-cli- 登录
npm netlify login这将打开一个浏览器窗口，要求您使用 Netlify 登录并授予 Netlify CLI 的权限。
- 新建站点
netlify sites:create然后按提示为站点命名：
E:\Exercises\NodeJS\51feblog>netlify sites:create
? Team: 51fe’s team
? Site name (leave blank for a random name; you can change it later): 51feblog终端命令行输出以下类似信息表示新建成功：
Site Created
Admin URL: https://app.netlify.com/sites/51feblog
URL: https://51feblog.netlify.app
Site ID: effed763-07f2-4549-93c1-1f50cbcf0b60
Linked to 51feblog- 构建站点
netlify build终端命令行会输出以下类似信息表示构建成功：
Netlify Build
────────────────────────────────────────────────────────────────
❯ Version
@netlify/build 29.7.1
❯ Flags
dry: false
offline: false
❯ Current directory
E:\Exercises\NodeJS\51feblog
❯ Config file
E:\Exercises\NodeJS\51feblog\netlify.toml
❯ Context
production
1. build.command from netlify.toml
────────────────────────────────────────────────────────────────
$ npm run build
> openai-quickstart@0.1.0 build E:\Exercises\NodeJS\51feblog
> next build
info - Linting and checking validity of types
info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data
info - Generating static pages (3/3)
info - Finalizing page optimization
Route (pages) Size First Load JS
┌ ○ / 809 B 74.2 kB
├ └ css/c04383cd4c21f081.css 513 B
├ ○ /404 181 B 73.6 kB
└ λ /api/generate 0 B 73.4 kB
+ First Load JS shared by all 73.4 kB
├ chunks/framework-ad45764ecfcae9e5.js 45.4 kB
├ chunks/main-ee0cf4b7f81d7c24.js 27.1 kB
├ chunks/pages/_app-df511a3677d160f6.js 194 B
└ chunks/webpack-8fa1640cc84ba8fe.js 750 B
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)其实，这一步和直接执行 next build 命令的输出是一样的。
- 部署站点
netlify deploy --prod终端命令行将输出以下类似信息：
Configuration path: E:\Exercises\NodeJS\51feblog\netlify.toml
Deploying to main site URL...
✔ Finished hashing
✔ CDN requesting 20 files
✔ Finished uploading 21 assets
✔ Deploy is live!
Logs: https://app.netlify.com/sites/51feblog/deploys/64210b05960c8a461962554a
Unique Deploy URL: https://64210b05960c8a461962554a--51feblog.netlify.app
Website URL: https://51feblog.netlify.app貌似部署成功了！点击访问https://51feblog.netlify.app，结果报 404 错误：
恼不火恼火，意不意外？
分析问题
点击 page not found。这个问题很多人都在问，官方支持说原则上只能访问根目录下 index.html，建议下载部署包分析。
下载部署包解压后一看，index.html 确实不在根目录下，还在 server\pages 下，感觉是少操作了哪一步。
那我们应该如何在 Netlify 上手动部署 Next.js 网站？Netlify 的文档写得并不清楚。求助 ChatGPT 也没得到答案，Google 这个问题终于找到答案。其实非常简单，就是使用 @netlify/plugin-nextjs 中间件，为 Next.js 添加一个 Runtime。
解决方案
Netlify 原生支持 Next.js，大多数情况下您不需要安装或配置任何东西。如果您在 Netlify 上构建（比如链接 Git 一键式部署），Next.js 运行时不需要额外的配置。如果您使用 Netlify CLI 在本地构建和部署，则必须使用 netlify deploy --build 进行部署。
单独运行构建和部署命令是行不通的，因为 Next.js 运行时不会生成所需的配置。
手动安装 Next.js 运行时
- 通过 UI（推荐）:
您可以打开 “Site settings” > “Build settings” > “Build & deploy” > “Edit settings”，在 Runtime 项选择 Next.js 安装运行时。推荐使用此方法，因为您将受益于重要修复和功能更新的自动升级。
- 通过 npm：
npm install -D @netlify/plugin-nextjs修改 netlify.toml
添加中间件，然后将以下内容添加到 netlify.toml 文件中:
[[plugins]]
package = "@netlify/plugin-nextjs"不管使用哪种方式手动安装 Next.js 运行时，都需要添加 netlify.toml 文件。接下来我们将前面得第 5、6 步合二为一，重新构建部署。
运行构建和部署命令
netlify deploy --build --prod如果在终端看到以下类似使用 Next.js 运行时的输出信息时，则表示 Next.js 部署成功了！
❯ Using Next.js Runtime - v4.32.2
1. @netlify/plugin-nextjs (onPreBuild event) ...
2. build.command from netlify.toml...
3. @netlify/plugin-nextjs (onBuild event)...
4. Functions bundling...
5. Edge Functions bundling ...
6. @netlify/plugin-nextjs (onPostBuild event) ...总结
使用 Netlify CLI 部署 Next.js 应用时，一定要手动安装 Next.js 运行时，并将 @netlify/plugin-nextjs 中间件添加到 netlify.toml 中。
练一练
到现在 ChatGPT 应用都很火，您可以使用 Netlify CLI 将这个官方的开源 Demo 部署到 Netlify（您会遇到一样的问题），那样就可以不用 VPN 也能玩 ChatGPT 了。前提时您要有一个 ChatAI API 的密钥。
评论 (0)