NextJS混合SSR/SSG项目如何在EC2部署？.next文件夹作用是什么

一、.next文件夹的作用 #

执行npm run build命令时，Next.js会完成全项目的编译打包工作，最终生成.next文件夹，它的核心作用如下：

• 存储编译后的页面产物：包含getStaticProps生成的静态页面HTML、预拉取的JSON数据，以及getServerSideProps对应的服务端渲染逻辑bundle
• 存储优化后的前端资源：包含压缩混淆后的客户端JS、CSS、静态资源映射表，还有构建缓存内容，大幅提升生产环境的运行性能
• 作为生产服务的运行基础：你执行npm run start启动生产环境服务时，Next.js不会读取项目源码，而是直接加载.next文件夹内的编译后内容运行，无需二次编译

二、Next.js项目部署到EC2实例的步骤 #

前提：你已经提前准备好可用的EC2实例，安全组已开放SSH(22)、应用服务端口(默认3000)，如果要配置域名访问还需开放80/443端口。

• 第一步：连接EC2实例并配置基础环境
  通过SSH连接到你的EC2实例后，先安装和本地开发环境版本一致的Node.js LTS版，以及npm包管理工具。
• 第二步：上传项目代码
  可以通过Git拉取代码，或者scp工具上传本地项目代码到EC2实例的指定目录，注意不要上传本地的node_modules、.next文件夹，避免不同操作系统的依赖兼容问题。
• 第三步：安装项目依赖
  进入项目根目录，执行npm install --production安装生产环境所需的所有依赖，跳过开发依赖减少资源占用。
• 第四步：执行构建
  执行npm run build命令，等待构建完成后会自动生成.next文件夹，构建过程如果出现报错需要先排查解决问题再进行后续步骤。
  注意：如果项目用到了环境变量，需要提前把生产环境的.env配置文件放到项目根目录再执行构建
• 第五步：后台启动生产服务
  直接执行npm run start会在SSH断开后停止服务，推荐使用PM2做进程管理：
  1. 全局安装PM2：npm install pm2 -g
  2. 启动Next.js服务：pm2 start npm --name "你的应用名称" -- run start
     后续可以通过pm2 logs 你的应用名称查看服务日志，pm2 restart 你的应用名称重启服务，pm2 startup配置实例重启后自动拉起服务。
• 第六步（可选）：配置Nginx反向代理
  如果你需要用域名访问、配置HTTPS、静态资源缓存，可以安装Nginx，配置规则将80/443端口的请求转发到Next.js默认监听的127.0.0.1:3000端口即可。

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