如何在NextJS中暴露Git子模块的路由页面？

方法1：文件同步脚本 #

NextJS不识别符号链接，最直接的解决方式是用脚本同步子模块的路由文件到主项目的pages目录。

1. 编写shell脚本（比如命名为sync-dashboard.sh）：

#!/bin/bash
# 清空目标目录，避免旧文件残留
rm -rf pages/dashboard
# 复制子模块的pages目录到主项目对应位置
cp -r submodules/dashboard/pages pages/dashboard

2. 在package.json的scripts中添加前置命令，让脚本自动执行：

"scripts": {
  "predev": "./sync-dashboard.sh",
  "prebuild": "./sync-dashboard.sh",
  "dev": "next dev",
  "build": "next build"
}

3. 在.gitignore中加入pages/dashboard/，避免把复制的文件提交到主仓库。

每次启动开发服务或执行构建前，脚本会自动同步子模块的路由文件，NextJS就能正常识别这些路由了。

方法2：NextJS Rewrites + Webpack配置（适合NextJS 10+） #

利用NextJS的路由重写功能，配合webpack配置实现路由转发，无需复制文件。

1. 修改next.config.js，添加重写规则和webpack配置：

const path = require('path')

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/dashboard/:path*',
        destination: '/dashboard-proxy/:path*',
      },
    ]
  },
  webpack: (config) => {
    // 给子模块pages目录设置别名，方便导入
    config.resolve.alias['@dashboard'] = path.join(__dirname, 'submodules/dashboard/pages')
    return config
  },
}

module.exports = nextConfig

2. 在主项目的pages目录下创建dashboard-proxy文件夹，每个路由文件作为子模块页面的代理：
   比如pages/dashboard-proxy/index.tsx：

// 直接导入子模块的页面组件
export { default } from '@dashboard/index'
// 同步数据获取方法
export { getStaticProps, getServerSideProps } from '@dashboard/index'

用户访问/dashboard路径时，会被重写到/dashboard-proxy，实际渲染的是子模块的内容。

方法3：App Router 组件导入（NextJS 13+） #

如果使用NextJS 13+的App Router（app文件夹），可以直接在主项目的路由目录下创建文件，导入子模块的组件：

比如主项目app/dashboard/page.tsx：

import DashboardIndex from '../../submodules/dashboard/app/page'
export default DashboardIndex

主项目app/dashboard/stats/page.tsx：

import DashboardStats from '../../submodules/dashboard/app/stats/page'
export default DashboardStats

若子模块路由较多，可编写小脚本自动生成这些代理文件。这种方式还能在主项目的代理文件中添加额外逻辑，比如权限校验、全局状态注入等。

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