Next.js On-Demand Revalidation在Firebase Hosting无法生效的问题咨询

Firebase Hosting 对 Next.js ISR 的按需重验证（On-Demand Revalidation）存在特定配置要求，未正确配置时会出现调用res.revalidate(path)后页面无法更新的问题，以下是关键配置要点：

• 配置请求转发到云函数
  Next.js 的按需重验证依赖 API 路由触发服务器端逻辑，Firebase Hosting 默认不会自动将动态请求转发给 Next.js 处理函数。需修改firebase.json，确保所有 API 路由和动态页面请求都指向自动生成的nextjs云函数：

  {
    "hosting": {
      "source": ".",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "frameworksBackend": {
        "region": "us-central1"
      },
      "rewrites": [
        {
          "source": "/api/**",
          "function": "nextjs"
        },
        {
          "source": "**",
          "function": "nextjs"
        }
      ]
    }
  }
  

• 验证重验证 API 路由的有效性
  确保用于触发重验证的 API 路由能正常执行，比如pages/api/revalidate.js需包含正确的权限校验和重验证逻辑：

  export default async function handler(req, res) {
    if (req.query.secret !== process.env.REVALIDATE_SECRET) {
      return res.status(401).json({ message: 'Invalid secret' });
    }
    try {
      await res.revalidate('/target-page');
      return res.json({ revalidated: true });
    } catch (err) {
      return res.status(500).send('Revalidation failed');
    }
  }
  

  触发请求时需携带正确的密钥参数，避免因权限拦截导致重验证逻辑未执行。

• 完整部署托管与云函数
  部署时需同时部署 Firebase Hosting 和 Functions，仅部署托管部分会导致云函数未更新，无法处理重验证请求。使用命令：

  firebase deploy --only hosting,functions
  

• 调整缓存策略
  Firebase Hosting 默认的强缓存可能导致重验证后页面仍显示旧内容。可在firebase.json中针对目标页面设置宽松的缓存策略：

  {
    "hosting": {
      "headers": [
        {
          "source": "/target-page",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "s-maxage=0, stale-while-revalidate"
            }
          ]
        }
      ]
    }
  }
  

  此配置既保证缓存效率，又能在重验证时快速更新内容。

若以上配置完成后问题仍存在，建议升级 Firebase CLI 到最新版本，确保与 Next.js 的兼容性。

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