Next.js：能否让子目录同时作为独立应用及主应用子路径？

当然可以实现，下面提供两种最常用的可行方案，你可以根据自己的维护习惯选择：

方案1：代码抽离+独立构建部署（推荐） #

核心思路是把block-game的核心代码抽成可复用模块，让主应用和独立站点应用分别引入该模块，各自独立部署。

具体步骤： #

1. 抽离Block Game代码
   用Monorepo（比如TurboRepo、Nx，或手动创建packages目录）把block-game的所有页面、组件、逻辑抽成独立包（比如@your-project/block-game）。这个包只包含游戏核心实现，不依赖主应用的路由或布局。

2. 主应用集成
   在主应用的/src/app/block-game/page.tsx中直接导入该包的核心组件：

   import BlockGame from '@your-project/block-game'
   
   export default function BlockGamePage() {
     return <BlockGame />
   }
   

   主应用正常部署到MyFakeDomain.com，即可通过/block-game访问游戏。

3. 独立站点应用
   创建新的Next.js项目（或在Monorepo的apps目录下新增项目），直接在/src/app/page.tsx中导入游戏核心组件：

   import BlockGame from '@your-project/block-game'
   
   export default function Home() {
     return <BlockGame />
   }
   

   将这个独立项目部署到FakeBlockGame.com，访问根路径即可打开游戏。

优缺点： #

• ✅ 两个应用完全独立，更新、部署互不影响
• ✅ 代码复用彻底，维护成本低，修改游戏逻辑只需改一次
• ❌ 初期需配置Monorepo，有一定搭建成本

方案2：单代码库+环境变量控制路由 #

如果不想拆分代码，可通过同一个代码库，用环境变量切换路由行为，实现两种部署模式。

具体步骤： #

1. 配置环境变量
   在项目根目录创建两个环境文件：

   • .env.main：NEXT_PUBLIC_APP_MODE=main
   • .env.block-game：NEXT_PUBLIC_APP_MODE=block-game

2. 调整页面逻辑

   • 把原主应用首页内容抽成独立组件（比如MainHome.tsx）
   • 修改根目录page.tsx，根据环境变量切换渲染内容：

     import MainHome from './components/MainHome'
     import BlockGame from './block-game/page'
     
     export default function Home() {
       if (process.env.NEXT_PUBLIC_APP_MODE === 'block-game') {
         return <BlockGame />
       }
       return <MainHome />
     }
     

3. 添加构建脚本
   在package.json中添加两个构建命令（需先安装env-cmd：npm install env-cmd --save-dev）：

   "scripts": {
     "build:main": "env-cmd -f .env.main next build",
     "build:block-game": "env-cmd -f .env.block-game next build"
   }
   

4. 分别部署

   • 运行npm run build:main，将产物部署到MyFakeDomain.com，此时/block-game正常访问游戏，根路径为主页面
   • 运行npm run build:block-game，将产物部署到FakeBlockGame.com，此时根路径直接打开游戏

补充说明： #

如果block-game有独立API路由，需用环境变量控制API路径前缀：

const apiPrefix = process.env.NEXT_PUBLIC_APP_MODE === 'block-game' ? '/api' : '/block-game/api'

fetch(`${apiPrefix}/game-state`)

优缺点： #

• ✅ 无需拆分代码，所有逻辑在一个仓库
• ❌ 两种部署模式共享代码，易产生冗余逻辑，维护不当易出冲突
• ❌ 部署需切换环境变量，流程相对繁琐

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