非根目录部署 nextjs 项目，资源文件 404 的问题

问题描述

一般的我们见到的 nextjs 项目部署，按照官方步骤基本上没啥问题，但是今天遇到一个不是太常见的：在网站的子目录部署 nextjs 项目。

最近开发了一个浏览器插件，打算用 nextjs 做一个简单的官方主页，这样显得正式一点，结果在平平无奇的部署上出问题了。

本地开发没有问题，在部署的时候发现网站虽然可以正常打开，但是 JavaScript、css 等资源的状态是 404.

不过，看文件属性的话，该文件在服务器上是明显存在的

只是，nextjs 生成的文件夹是 .next （这点和开发环境一致），不知道为什么在服务端请求变成了 _next，

其他人的方案

网上各种搜索后，看到有人遇到了同样的问题

但是其解决方法试过后并不适用，也可能是 Nginx 的配置问题。如果有大佬懂这方面的，感谢告知。

rewrite 指令的方式，我也试过，但是没有效果。

location /lifetime/_next/static/ {
        alias /home/ubuntu/root/.next/static/;
        expires 365d;
        access_log off;
}
location /lifetime {
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass http://localhost:3001;
}
// 当然这里还有另一个解决办法是通过rewrite指令，修改proxy_pass后的url。

Stack Overflow 相关问题

nextjs-deploy-to-a-specific-url-path

看了下，发现别人老早也遇到了类似的问题，但是没发现比较靠谱点的解决方法。

我的笨方法

首先，如果非根目录的话，next.config.js 的这个配置是必须的

const nextConfig = {
  reactStrictMode: true,
   basePath: '/sub-directory',
   assetPrefix: '/sub-directory'
}
// basePath指定项目的根路径，assetPrefix指定静态资源的路径
module.exports = nextConfig

Nginx 的配置如下：

  location /sub-directory {
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass http://localhost:6666;
    }

通过 F12 发现，浏览器请求静态资源的路径是 /sub-directory/_next/static/，但是服务器上是没有 _next 文件夹的。

一个笨方法就是，新建 _next 目录，然后把 /sub-directory/.next/static/ 目录下的所有文件复制到 /sub-directory/_next/static/

写一个脚本文件即可，在 package.json 中添加一个 script 命令即可:

"build": "next build  && ./copy_next.sh"

对于 nextjs 和 Nginx 还不是非常熟悉。如果您知道问题出在哪里，欢迎告知。

原文链接：https://juejin.cn/post/7345423755948326966 作者：江湖人称向前兄