Next.js 13部署Firebase Hosting遇Not found等问题求助

核心配置要点 #

• 更新Firebase CLI到最新版：必须使用firebase-tools v11.10.0及以上版本（该版本开始正式支持Next.js 13 App Router），执行命令：npm install -g firebase-tools
• 初始化Firebase项目的正确步骤：
  1. 项目根目录执行firebase init hosting，选择已有Firebase项目
  2. 公共目录输入out（Next.js 13 App Router静态导出默认输出目录）
  3. 询问是否配置为单页应用时选No（App Router的路由需要正确映射，不能全量重定向到index.html）
  4. 按需选择是否开启GitHub自动构建部署
• Next.js配置调整：在next.config.js中添加静态导出配置：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    output: 'export',
    // 若使用Image组件，需添加以下配置（静态导出不支持自动图片优化）
    images: {
      unoptimized: true,
    },
  }
  
  module.exports = nextConfig
  

  若项目用到SSR（如Page组件内有服务器端数据获取），需结合Firebase Functions托管：
  1. 执行firebase init functions初始化函数服务，选择对应语言
  2. 在functions目录执行npm install next@13 firebase-functions安装依赖
  3. 修改firebase.json添加路由重写规则：

     {
       "hosting": {
         "public": "out",
         "ignore": [
           "firebase.json",
           "**/.*",
           "**/node_modules/**"
         ],
         "rewrites": [
           {
             "source": "**",
             "function": "nextServer"
           }
         ]
       },
       "functions": {
         "source": "functions"
       }
     }
     

  4. 在functions目录的index.js/index.ts中添加Next.js服务代码：

     const functions = 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 = functions.https.onRequest((req, res) => {
       functions.logger.info('Requested path: ' + req.path);
       return app.prepare().then(() => handle(req, res));
     });
     

  5. 部署时执行firebase deploy --only hosting,functions

常见问题排查 #

• 部署后返回“Not found”：检查next build生成的out目录结构，确认页面文件是否正确生成；或检查路由重写规则是否配置到位
• 出现错误页面：查看Firebase控制台的Hosting/ Functions日志，定位具体错误（如依赖缺失、环境变量未配置等）
• 关于getServerSideProps：App Router已废弃该方法，直接在Page组件中用async function Page() { const data = await 服务器端数据请求; }实现服务器端数据获取，Firebase Functions托管方式支持该写法

是否需要切换到Vercel？ #

如果项目重度依赖Next.js最新特性（如App Router全量SSR、Edge Runtime等），Vercel作为官方托管平台支持更完善，部署流程更简洁；但如果不想放弃Firebase的Auth、Firestore等生态服务，按上述正确配置即可正常部署App Router项目，无需更换平台。

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