Next.js项目执行npm run build生成的构建文件部署服务器无法运行如何解决

问题排查与解决方案 #

你遇到的是Next.js生产部署的典型配置遗漏问题，按以下步骤排查即可解决：

• 确认部署方式是否正确
  Next.js默认运行在Node.js服务端环境，并非纯静态站点：
  • 不要直接把build文件夹丢到Nginx等静态文件服务中运行，这是React CRA等纯前端框架的部署逻辑，不适用默认配置的Next.js
  • 服务器上需要先安装项目依赖：执行npm install安装所有生产依赖
  • 依赖安装完成后执行npm run start启动Next.js生产服务，默认端口为3000
  • 配置Nginx等反向代理工具，将你的域名请求转发到127.0.0.1:3000即可正常访问
• 若需要部署为纯静态站点无需Node服务，修改以下配置：
  修改package.json的build命令为：

  "build": "next build && next export"
  

  重新执行build后会生成out文件夹，这个文件夹的内容才是可以直接丢到静态文件服务运行的纯静态资源。注意如果使用了next/image组件，静态导出模式下默认不支持，需要替换为原生<img>标签或者配置自定义图片loader。
• 其他常见排查点
  • 确认服务器Node.js版本和本地开发环境一致，Next.js 11要求Node版本至少为12.22.0，版本不兼容会导致启动报错
  • 部署时不要只上传build文件夹，需要把整个项目根目录（包含node_modules、next.config.js、package.json和build文件夹）都上传到服务器，next start命令需要读取根目录的配置文件和依赖才能正常运行
  • 如果使用PM2等进程管理工具启动服务，确认工作路径是项目根目录，不要切换到build目录下执行启动命令

内容的提问来源于stack exchange，提问作者karthik