在使用 React + Next.js 开发前端项目时遇到的最大痛点之一就是建立后生成的不是传统的 dist 或 output 目录，而是一个包含 .next 的文件夹。是开启了动态路由后npm run build 会把所有代码打包进 .next/standalone/server.js不再生成静态页面入口，直接得到一个可执行的 Node 服务器。这让原本只想部署静态文件的前端小白彻底被难住：没有 dist。没有单纯的 html/css/js 文件，部署方式变得极其繁琐。

从痛点一来看，建立结果与预期不符

你期待：一个清晰的 dist/output/static 目录；实际得到：

• .next 文件夹

从痛点二来看。手动部署步骤繁琐且易错

每一次部署都需要手动拷贝、压缩、上传、解压、启动，而且需要记住各种命令和方法配置。任何一步出现疏漏都可能导致服务无法正常运行或日志难以定位。

说到方法，Standalone 模式 + 自动化脚本

说到第一步先，本地建立

在项目根目录下执行：

npm run build
# 或者
yarn build

建立成功后会输出类似：

✓ Compiled successfully
✓ Linting and checking validity of types
✓ Collecting page data
✓ Generating static pages
✓ Finalizing page optimization

说到接下来，准备部署包结构

.next/standalone 包含了所有依赖和可执行入口。需要按以下结构打包：

├── server.js # 来自 .next/standalone/server.js
├── package.json # 来自 .next/standalone/package.json
├── .next/
│ ├── server/
│ │ └── static/
│ └── static/
├── public/ # 根目录中的 public/
└── deploy.zip # 打包后的压缩文件

：打包上传

Create a PowerShell script named package-deploy.ps1:

Write-Host "正在打包部署文件..." -ForegroundColor Green
# 创建临时目录
if { Remove-Item -Recurse -Force deploy-temp }
New-Item -ItemType Directory -Path deploy-temp | Out-Null
# 复制 standalone 文件
Write-Host "复制 standalone 文件..." -ForegroundColor Yellow
Copy-Item -Path ".next/standalone/*" -Destination "deploy-temp/" -Recurse -Force
# 复制 static 文件
Write-Host "复制 static 文件..." -ForegroundColor Yellow
New-Item -ItemType Directory -Path "deploy-temp/.next" | Out-Null
Copy-Item -Path ".next/static" -Destination "deploy-temp/.next/" -Recurse -Force
# 复制 public 文件
Write-Host "复制 public 文件..." -ForegroundColor Yellow
Copy-Item -Path "public" -Destination "deploy-temp/" -Recurse -Force
# 创建压缩包并清理临时文件夹
Write-Host "创建 deploy.zip..." -ForegroundColor Yellow
Compress-Archive -Path "deploy-temp/*" -DestinationPath "deploy.zip" | Out‑Null
Remove‑Item –Recurse –Force deploy‑temp
Write‑Host “打包完成！
从文件来看，deploy.zip” –ForegroundColor Green
Write‑Host “文件大小: $.Length / 1MB) MB” –ForegroundColor Cyan
从运行来看，powershell –ExecutionPolicy Bypass –File package-deploy.ps1

第四步的观点是。服务器端部署流程

上传到服务器

scp deploy.zip user@your-server:/path/to/app/
# 或者使用 WinSCP / FileZilla 等 GUI 工具。

解压并开启服务

ssh user@your-server
cd /path/to/app
unzip deploy.zip
# 查看结构确认无误：
ls -la
# 手动测试：
HOSTNAME=. PORT=3000 node server.js
# 推荐生产环境使用 PM2 管理：
pm2 start server.js --name your-app
pm2 save
pm2 startup

PM2 常用命令速查


停止 & 删除错误进程：
pm2 stop your-app && pm2 delete your-app 



Status 查询：
pm2 status 



Error 日志查看：
pm2 logs your-app --err --lines 20 



完整日志查看：
pm2 logs wps-app --lines 20 



进程详情：
pm2 show your-app 




全自动化脚本— 一键完成 Build → Package → Upload → Start 🚀

Create a file named manual-deploy.ps1。copy following content into it:

Run it:
powershell
powershell –ExecutionPolicy Bypass –File manual-deploy.ps1



提示 & 小技巧：

- 配置好 SSH key，可免除每次密码输入。

- 在 Windows 上若缺失 OpenSSH，可通过“管理功能”安装。

- 每次成功部署后可用 pm2 list 验证应用是否在线。

- 若出现 IPv6 listening 错误，请在启动命令中加入 HOSTNAME=. 前缀。

- pm2 save 与 pm2 startup 能保证重启后自动恢复进程状态。其实，

- 如需多实例负载。可通过 --instances max 启动 PM2 集群模式。









此方案解决了“没有 dist 文件夹”、 “无法直接打开页面”、 “手动步骤繁琐”的三大痛点。让你能像普通静态站那样快速上线 Next.js 项目，并借助 PM2 实现高可用与监控。`