如何在NextJS中缓存图像资产?

Question

NextJS文档特别说明(https://nextjs.org/docs/api-reference/next.config.js/headers#cache-control):

You cannot set Cache-Control headers in next.config.js file as these will be overwritten in production to ensure that API Routes and static assets are cached effectively.

在NextJS中缓存图像资源的替代方法是什么?

我尝试使用NextJS图像组件，但它混淆了我的自托管图像url与专有的NextJS url。我想逃避。

Answer 1

当使用<Image />组件时，NextJS将自动存储并提供它在服务器端存储的优化版本。这就是为什么你看到NextJS URL的原因(因为这是新的优化和缓存图像所在的地方)。如果你不想要这些优化，你可以使用常规的<img />元素，因为NextJS需要使用它的后端服务来为你优化图像。