NextJS 13中如何将静态站点挂载到自定义URL路径？

要实现将/static/site1/等静态目录映射到myportfolio.com/demo/site1/这类URL路径，可以通过以下步骤完成：

1. 配置Next.js重写规则 #

在你的作品集网站的next.config.js中添加rewrites配置，将请求路径映射到对应的静态文件目录：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/demo/:site*', // 匹配所有/demo/开头的路径
        destination: '/static/:site*', // 转发到/static下的对应目录
      },
    ];
  },
};

module.exports = nextConfig;

这个配置会自动将所有/demo/site1/xxx的请求，转发到项目根目录下/static/site1/xxx的静态文件。

2. 配置待展示站点的资源路径前缀 #

每个待展示的Next.js站点在构建静态文件时，需要设置basePath，确保站点内的资源引用（如CSS、JS、图片）会自动带上/demo/siteX的前缀，避免加载失败：

在每个待展示站点的next.config.js中添加：

const nextConfig = {
  basePath: '/demo/site1', // 对应该站点在作品集的URL路径，site2替换为/demo/site2
  output: 'export', // 强制导出纯静态文件
};

module.exports = nextConfig;

设置完成后执行npm run build，生成的静态文件会自动适配目标URL路径。

3. 调整Docker构建脚本 #

修改你的bash脚本，将每个待展示站点构建后的out目录（Next.js导出静态文件的默认目录）内容复制到作品集项目的对应static子目录：

# 示例：处理site1
git clone https://github.com/your-username/site1.git
cd site1
npm install
npm run build
# 将构建产物复制到作品集的static/site1目录
cp -r out/* ../static/site1/
# 清理临时文件
cd ..
rm -rf site1

# 同理处理site2、site3等站点

这样构建完成后，作品集网站就能通过/demo/site1/访问到对应静态站点的内容。

内容的提问来源于stack exchange，提问作者Emre Chomko