如何在Nextjs中对图像的缓存控制中应用max-age？

Question

我创建了以下 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 Service，该服务托管此应用程序并启用了 Cloud CDN。我还设置了客户端的 TTL 值，默认值和最大值为 1 天。 我仍然在生产中的网站响应标头中将图像的 Cache-Control 标头设置为

public,max-age=60,must-revalidate

。

您能否建议一下还有哪些地方需要更改？

Answer 1

当上游图片不包含Cache-Control头或者该值很低时，您可以配置minimumCacheTTL来增加缓存持续时间。

module.exports = {
  images: {
    minimumCacheTTL: 15552000, // 6 months
  },
}

注意：如果您需要更改每个图像的缓存行为，您可以配置标头以在上游图像上设置 Cache-Control 标头（例如 /some-asset.jpg，而不是 /_next/image 本身）。

因此，要为所有图像设置缓存，您需要配置minimumCacheTTL值。