不使用Vercel部署带getServerSideProps的Next.js应用需要哪些步骤？

因为项目使用了getServerSideProps，无法导出纯静态文件部署，和你之前部署纯React客户端项目的逻辑完全不同，需要在服务器上运行Node.js服务来处理服务端渲染逻辑，具体步骤如下：

1. 本地构建并整理部署文件 #

• 先确认项目package.json中存在默认的构建和启动脚本，没有的话手动补充：

  {
    "scripts": {
      "build": "next build",
      "start": "next start"
    }
  }
  

• 本地执行npm run build完成构建，成功后会生成.next文件夹，这是Next.js的核心构建产物，不是纯React项目的build文件夹。
• 整理需要上传到服务器的文件清单：
  • 构建生成的.next文件夹
  • 项目根目录的package.json、锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml）
  • 自定义配置文件（如next.config.js、env配置文件等）
  • 静态资源文件夹public
    不需要上传本地的node_modules文件夹，到服务器安装依赖兼容性更好

2. 服务器环境准备 #

• 服务器安装和本地开发环境大版本一致的Node.js，避免兼容性问题。
• 将上一步整理的所有文件上传到服务器的指定目录，例如/var/www/your-next-project。
• 进入服务器上的项目目录，执行生产依赖安装命令：npm install --production，仅安装运行必须的依赖，减少体积。

3. 启动并保活Next.js服务 #

• 先测试服务是否能正常启动：执行npm run start，默认会在3000端口启动服务，执行curl http://localhost:3000确认页面能正常返回，getServerSideProps相关逻辑正常运行。
• 生产环境需要用进程管理工具保证服务不掉线，推荐使用PM2，操作步骤如下：
  • 全局安装PM2：npm install pm2 -g
  • 项目目录下启动服务：pm2 start npm --name "your-next-app" -- run start
  • 可通过pm2 status查看服务运行状态，pm2 logs your-next-app查看运行日志排查问题。

4. 反向代理配置（推荐） #

不建议直接将3000端口暴露到公网，推荐用Nginx做反向代理，同时处理静态资源响应、SSL证书配置等，核心Nginx配置参考如下：

server {
  listen 80;
  server_name 你的实际域名;

  # 静态资源直接由Nginx返回，性能远高于Node服务处理
  location /_next/static {
    alias /var/www/your-next-project/.next/static;
    expires 1y;
    add_header Cache-Control "public, immutable";
  }
  location /public {
    alias /var/www/your-next-project/public;
  }

  # 动态请求转发给Next.js服务处理
  location / {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
  }
}

配置完成后执行nginx -s reload重载配置即可通过域名访问项目，需要HTTPS的话补充对应的SSL证书配置即可。

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