如何让 Next.Js 下载我在网站中使用的所有外部资源并在本地提供它们？

Question

我一直在用无头 WordPress 和 NextJs 构建一个作品集。我编写了自己的函数来从 GraphQl 端点获取数据。一切正常。但我有媒体文件（图像、pdf 等）存储在 WordPress CMS 上，并作为指向 next.Js 的链接导入（作为外部图像导入）。例如：

<img src="https://wordpresscms.mywebsite.com/uploads/2020/02/myimage.png" />

但我希望资产托管在 nextJs 网站上，并在每次构建时自动更新。有没有办法在 Next.Js 中自动执行此操作？或者当我将网站部署到生产环境时这已经完成了吗？

我脑海中的情景：

1. 我将资源上传到 WordPress cms。
2. NextJs 从 WordPress 获取 JSON 数据，其中包括外部资产的链接（在构建时使用 GraphQL API (getStaticProps)）
3. NextJs 下载资源。
4. NextJs 将外部 URL 替换为本地 URL（与我的 NextJs 网站托管在同一主机上）。

谢谢。

Answer 1

更新：Next.js 有一个内置标签<Image />。它预加载图像并具有延迟加载和许多不错的功能。链接： https: //nextjs.org/docs/api-reference/next/image

例子：

import Image from 'next/image'

...
..
.

<Image
    src={"the link of the image"}
    alt=""
    width="300"
    height="300"
/>