NextJS 13构建报错及Firebase/Vercel部署可行方案咨询

部署到Vercel #

Vercel是NextJS官方出品的部署平台，对App Router支持最完善，操作零门槛：

• 登录Vercel控制台，关联你的代码仓库（GitHub/GitLab/Bitbucket）
• Vercel会自动识别NextJS项目，默认使用next build作为构建命令，无需额外配置
• 部署完成后自动分配免费域名，也可绑定自定义域名
• 完全支持App目录的所有特性（静态生成、增量静态再生、SSR等），无需额外适配

部署到Firebase #

根据项目需求选择以下两种方案：

方案1：全特性部署（支持SSR/ISR/API路由） #

适合需要服务端渲染或增量静态再生的项目，需结合Firebase Hosting和Cloud Functions：

1. 安装Firebase CLI：npm install -g firebase-tools
2. 登录Firebase账号：firebase login
3. 初始化项目：执行firebase init，依次选择Hosting和Functions
4. 修改firebase.json配置：

   {
     "hosting": {
       "public": ".next/static",
       "rewrites": [
         {
           "source": "**",
           "function": "nextServer"
         }
       ],
       "headers": [
         {
           "source": "/_next/static/**",
           "headers": [
             {
               "key": "Cache-Control",
               "value": "public, max-age=31536000, immutable"
             }
           ]
         }
       ]
     },
     "functions": {
       "source": ".",
       "runtime": "nodejs18"
     }
   }
   

5. 在项目根目录创建functions/index.js，编写云函数：

   const { https } = require('firebase-functions');
   const next = require('next');
   
   const dev = process.env.NODE_ENV !== 'production';
   const app = next({ dev, conf: { distDir: '.next' } });
   const handle = app.getRequestHandler();
   
   exports.nextServer = https.onRequest((req, res) => {
     return app.prepare().then(() => handle(req, res));
   });
   

6. 安装依赖：npm install next firebase-functions firebase-admin
7. 构建并部署：next build && firebase deploy

方案2：静态部署（仅纯静态项目） #

如果你的项目没有SSR/API路由，且能兼容NextJS 13静态导出的限制，可采用此方案：

1. 修改next.config.js添加导出配置：

   /** @type {import('next').NextConfig} */
   const nextConfig = {
     output: 'export',
     trailingSlash: true // 适配Firebase Hosting的静态文件访问规则
   }
   
   module.exports = nextConfig;
   

2. 执行next build，生成out目录
3. 初始化Firebase Hosting时，指定out为public目录
4. 部署：firebase deploy --only hosting

注意事项 #

• 优先选择Vercel部署，官方集成度高，能完美适配App目录的所有特性，部署和调试效率更高
• Firebase的SSR方案需注意云函数的冷启动问题，可通过配置预留实例优化
• 无论哪种部署方式，确保项目的build命令为next build（静态部署需配合output: 'export'配置）

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