Next.js如何用静态文件部署
Next.js作为一个服务端渲染的常用框架，是很少有人用来弄成静态文件部署的。
这实在遇到一些极端情况了。如果你也和我一样满足以下条件，可以考虑下：
- 因为业务需要分成多个项目（或者域名）
- 并且每个项目只有2-3个页面
- 没有SEO的需求
- 你只会next这个框架（总不能让我用原生html手撸吧，那样会被同事笑话的）
是的，如果没有做SEO的需求的话，那么Next的SSR服务端渲染就成了鸡肋了。用pm2去起个服务还占内存，小一点的服务器放几个这样的服务就满了，数量多的话真就比不过静态文件部署了。
打包静态文件
其实就是类似Vue那样打包成一个dist包了，包里有index.html这些静态文件可以直接访问。
我这边是直接在本地打包的，打包之前需要先安装个依赖，因为是打包到正式环境的，你总不能在本地用本地的环境变量去打包吧？
这个依赖是用来指定打包的环境变量的，如果没有用.env文件去控制环境变量，可以不用安装这个依赖：
npm install dotenv-cli --save-dev
下面需要修改打包相关的配置文件，先是next.config.js:
/** @type {import('next').NextConfig} */
const nextConfig = {
// 重点是这里
output: 'export'
};
module.exports = nextConfig;
接着是package.json，scripts加多一行package的命令:
{
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "eslint . --ext .ts,.tsx -c .eslintrc.json --fix",
"package": "npx dotenv-cli -e.env.production -- next build && rimraf dist && move out dist"
}
}
配置好了直接在本地运行就打包好了：
npm run package
nginx配置微调
dist包放上去文件夹部署这部分不说了，nginx的配置需要微调下。
因为next本来是用来做服务端渲染的，突然被打包成静态文件夹，文件夹下可以看到页面都是.html结尾的，所以一旦线上指定了路径访问没加.html后缀就会出现访问不到的尴尬情况。
比如：
平时开发在本地 localhost:3000/success 访问页面，正常服务端渲染部署也是 xxx.com/success，但是打包出来的dist包success变成了success.html。
所以线上访问得用xxx.com/success.html才能访问到对的页面。
如果软件里写的跳转页面url是/success，线上就访问不到了，这样本地开发和线上访问就会有割裂感了。
所以这个问题是用nginx来解决，大概像下面这样写：
server {
listen 80;
server_name xxx.com;
location / {
root /path/to/your/dist;
index index.html;
# 访问没有html后缀的页面时加上.html文件
try_files $uri $uri.html $uri/ =404;
}
}
这种写法会自动带上参数，可以放心尝试。
到这里基本就成功部署了。