如何在Firebase部署带API路由的Next.js(TypeScript)项目

方案一：通过Firebase Cloud Functions托管API路由 #

静态导出不支持API路由，可将API路由部署为云函数，静态页面仍托管在Firebase Hosting，实现全栈部署：

1. 安装必要依赖

   npm install firebase-functions firebase-admin next @types/firebase-functions --save-dev
   

2. 更新firebase.json配置，将API请求转发至云函数

   {
     "hosting": {
       "public": "out",
       "rewrites": [
         {
           "source": "/api/**",
           "function": "nextApi"
         },
         {
           "source": "**",
           "destination": "/index.html"
         }
       ]
     },
     "functions": {
       "source": ".",
       "runtime": "nodejs18" // 匹配项目使用的Node.js版本
     }
   }
   

3. 创建云函数入口文件functions/index.ts

   import * as functions from 'firebase-functions';
   import next from 'next';
   
   const isDev = process.env.NODE_ENV !== 'production';
   const nextApp = next({ dev: isDev, conf: { distDir: 'out' } });
   const requestHandler = nextApp.getRequestHandler();
   
   export const nextApi = functions.https.onRequest(async (req, res) => {
     await nextApp.prepare();
     return requestHandler(req, res);
   });
   

4. 构建并部署

   npm run build
   firebase deploy --only hosting,functions
   

方案二：使用Firebase Hosting的Next.js实验性集成 #

Firebase提供了实验性Web框架集成，可直接部署Next.js全栈项目，无需手动拆分静态资源与API：

1. 升级Firebase CLI至最新版本

   npm install -g firebase-tools
   

2. 启用实验性功能并初始化（若已初始化项目，直接执行启用命令）

   firebase experiments:enable webframeworks
   firebase init hosting
   # 选择目标项目，选择"Web framework"选项，指定Next.js作为框架，按提示完成配置
   

3. 确认firebase.json配置（自动生成的配置通常已满足需求）

   {
     "hosting": {
       "source": ".",
       "frameworksBackend": {
         "region": "us-central1"
       }
     }
   }
   

4. 直接部署项目

   firebase deploy --only hosting
   

   该方案会自动处理静态页面渲染与API路由，无需执行npm run export，直接使用Next.js的构建产物。

关键注意事项 #

• 方案一中需确保云函数的Node.js版本与项目版本一致，避免兼容性问题。
• 方案二为实验性功能，功能可能随Firebase更新调整，部署前建议用firebase emulators:start本地验证API响应。

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