使用Nx+NextJs部署应用至Firebase遇‘找不到next可执行文件’问题

错误原因 #

Firebase Hosting的Web Frameworks实验功能默认会在source指定的目录下查找next可执行文件，但Nx仓库中Next.js是作为工作区全局依赖安装的，dist/apps/projectName目录下没有独立的next可执行文件，因此触发该错误。

解决方案 #

方案1：指定Next.js可执行文件路径

修改项目根目录的firebase.json，在hosting配置中添加frameworksBackend字段，指向工作区根目录的next可执行文件：

{
  "hosting": {
    "source": "dist/apps/projectName",
    "frameworksBackend": {
      "executablePath": "../node_modules/.bin/next"
    },
    // 保留原有hosting配置（比如rewrites、headers等）
  }
}

路径说明：../是从dist/apps/projectName回到工作区根目录，找到全局安装的Next.js可执行文件。

方案2：静态导出后部署（适合纯静态应用）

如果你的应用支持静态导出：

1. 执行Nx构建命令生成静态产物：

   nx build projectName --configuration=production
   

2. 修改firebase.json，切换为静态托管模式：

   {
     "hosting": {
       "public": "dist/apps/projectName/out",
       "ignore": [
         "firebase.json",
         "**/.*",
         "**/node_modules/**"
       ],
       "rewrites": [
         {
           "source": "**",
           "destination": "/index.html"
         }
       ]
     }
   }
   

3. 重新执行部署命令：

   firebase hosting:channel:deploy testChannel --project projectName
   

方案3：使用Nx Firebase插件简化流程

利用Nx官方的Firebase插件自动处理集成：

1. 安装插件：

   npm install @nx/firebase --save-dev
   

2. 使用Nx命令部署：

   nx deploy projectName --firebaseProject=projectName --channel=testChannel
   

该插件会自动适配Nx项目结构，无需手动调整Firebase配置中的路径问题。

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