Nextjs 13部署Firebase Hosting后预取链接与图片报503故障排查

以下是可能遗漏的配置项及解决方法：

• 检查firebase.json重写与后端配置
  针对Next.js 13 App Router，需确保Hosting的重写规则正确指向SSR/SSG服务，同时配置frameworksBackend指定后端服务区域：

  {
    "hosting": {
      "source": ".",
      "frameworksBackend": {
        "region": "us-central1" // 选择靠近用户的区域
      },
      "rewrites": [
        {
          "source": "**",
          "function": "nextjsServer"
        }
      ],
      "public": "public",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ]
    }
  }
  

• 修正next.config.js资源配置
  确保图片域名白名单、输出模式等配置正确，避免图片加载失败或预取异常：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    output: 'standalone', // 推荐使用standalone输出，减少部署体积与兼容性问题
    images: {
      domains: ['your-image-domain.com'], // 添加所有图片来源域名，包括Firebase Storage域名
      unoptimized: false // 保持图片优化开启，提升加载速度
    }
  }
  
  module.exports = nextConfig
  

• 调整Cloud Functions资源配额
  若使用Cloud Functions托管Next.js服务，503错误可能源于函数超时或内存不足，在firebase.json中配置：

  {
    "functions": {
      "runtime": "nodejs18", // 匹配Next.js 13支持的Node.js版本
      "memory": "512MB",
      "timeoutSeconds": 30
    }
  }
  

• 配置静态资源缓存头
  为静态资源设置合理缓存策略，提升预取速度并避免重复请求失败：

  {
    "hosting": {
      // ...其他配置
      "headers": [
        {
          "source": "**/*.{js,css}",
          "headers": [{"key": "Cache-Control", "value": "public, max-age=31536000, immutable"}]
        },
        {
          "source": "**/*.{png,jpg,jpeg,gif,webp,svg}",
          "headers": [{"key": "Cache-Control", "value": "public, max-age=31536000, immutable"}]
        }
      ]
    }
  }
  

• 验证部署流程与工具版本
  确保使用firebase deploy命令完成部署，而非手动上传文件；同时可尝试更新Firebase Tools到最新版本：

  npm install -g firebase-tools
  

• 检查Firebase项目配额
  登录Firebase控制台，查看Cloud Functions的调用次数、内存使用是否达到配额上限，必要时申请提升配额。

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