Next.js图片Cache-Control的max-age配置不生效问题排查

已创建如下next.config.js文件：

/** @type {import('next').NextConfig} */

const nextConfig = {
    
    async headers() {
        return [
            {
                source: "/_next/image",
                headers: [
                    {
                        key: "Cache-Control",
                        value: "public, max-age=86400, immutable", // 86400 seconds = 1 day
                    },
                ],
            },
        ];
    },
};
module.exports = nextConfig;

使用GCP负载均衡器托管Cloud Run服务，已启用Cloud CDN，且将客户端、默认和最大TTL值均设置为1天，但生产环境中图片的响应头仍显示public,max-age=60,must-revalidate，需排查需调整的配置。

• 补充Next.js图片优化配置：Next.js的Image优化器默认会给处理后的图片添加max-age=60的缓存头，优先级高于headers配置中的规则。需在next.config.js的images字段中设置minimumCacheTTL来覆盖默认值：

  const nextConfig = {
      images: {
          minimumCacheTTL: 86400, // 与目标缓存时长一致
      },
      async headers() {
          // 原headers配置保留
          return [
              {
                  source: "/_next/image",
                  headers: [
                      {
                          key: "Cache-Control",
                          value: "public, max-age=86400, immutable",
                      },
                  ],
              },
          ];
      },
  };
  module.exports = nextConfig;
  

• 确认Cloud Run部署已更新：修改next.config.js后，必须重新构建并部署Cloud Run服务，确保新配置已生效。可通过Cloud Run控制台查看服务的最新部署版本，或通过gcloud run deploy命令重新部署。

• 配置Cloud CDN的缓存改写规则：如果后端返回的Cache-Control头仍覆盖CDN设置，需在GCP负载均衡的后端服务配置中添加Cache-Control改写规则：

  1. 进入GCP控制台的负载均衡页面，找到目标负载均衡器
  2. 编辑后端服务，在"缓存"部分添加改写规则，将响应头的Cache-Control强制替换为public, max-age=86400, immutable
  3. 保存配置并等待生效

• 验证图片请求路径匹配：确认生产环境中的图片请求路径确实是/_next/image开头。若图片直接来自public目录（未经过Next.js Image优化器），需为这类路径单独添加headers规则，比如：

  async headers() {
      return [
          {
              source: "/_next/image",
              headers: [
                  { key: "Cache-Control", value: "public, max-age=86400, immutable" },
              ],
          },
          {
              source: "/images/:path*", // 匹配public/images下的所有图片
              headers: [
                  { key: "Cache-Control", value: "public, max-age=86400, immutable" },
              ],
          },
      ];
  },
  

• 检查Cloud CDN缓存键配置：确保负载均衡的缓存键未包含会导致缓存不命中的动态头（如Cookie、Authorization），否则每次请求都会回源到Cloud Run，返回原始的短缓存头。可在后端服务的缓存配置中，将缓存键设置为仅包含Host和请求路径。

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