Next.js如何用静态文件部署

Next.js作为一个服务端渲染的常用框架，是很少有人用来弄成静态文件部署的。

这实在遇到一些极端情况了。如果你也和我一样满足以下条件，可以考虑下：

1. 因为业务需要分成多个项目（或者域名）
2. 并且每个项目只有2-3个页面
3. 没有SEO的需求
4. 你只会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;
    }
}

这种写法会自动带上参数，可以放心尝试。

到这里基本就成功部署了。