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;
    }
}

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

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

到此这篇关于Next.js静态文件部署的实现步骤的文章就介绍到这了,更多相关Next.js静态文件部署内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！