Next.js如何在构建时自动拉取无头WordPress的外部媒体资源并本地托管替换外链？

Next.js本身没有内置的自动将外部托管媒体同步到本地、替换链接的能力，常规生产部署流程也不会自动完成这项操作，你预期的自动化流程可以通过自定义构建逻辑或现成的集成工具实现。

完全匹配你预期流程的自定义实现步骤 #

你现有的GraphQL拉取逻辑完全可以保留，只需要在现有流程中插入两个核心环节即可：

• 在getStaticProps（或App Router的generateStaticParams）拉取到完整的JSON数据后，先遍历所有字段提取所有WP来源的媒体URL，自动过滤掉非媒体类的普通链接
• 做增量同步校验：将本次拉取到的资源URL和上一次构建的资源映射表做比对，只下载新增、有更新的资源，统一存到Next.js的public目录下的自定义子路径（比如public/wp-assets/），保持原有上传目录的结构避免文件重名
• 批量替换JSON数据里的外部资源URL：将原来的https://wordpresscms.mywebsite.com/uploads/xxx格式的链接，替换为和Next.js同主机的本地路径，比如/wp-assets/xxx。像你之前写的<img src="https://wordpresscms.mywebsite.com/uploads/2020/02/myimage.png" />这类模板代码，会自动拿到替换后的本地路径，不需要手动修改页面组件的逻辑。

工具化简化方案 #

如果不想从零编写下载、校验、替换的逻辑，可以直接使用适配无头WP与Next.js场景的成熟集成库：

• 这类库已经内置了资源识别、增量下载、链接替换的核心能力，不需要你从零处理文件IO、网络请求的异常情况
• 可以和你现有的自定义GraphQL拉取逻辑适配，只需要引入对应的资源同步中间件，不需要完全重构已经跑通的现有项目

实操注意事项 #

所有同步的静态资源必须存放在Next.js的public目录下，不能放到app/pages等会被编译扫描的目录，否则无法被当静态资源正常访问

• 一定要持久化保存「原外部URL-本地路径」的映射缓存，避免每次构建都全量拉取所有历史媒体文件，拖慢构建速度
• 如果是部署到无状态的静态托管平台，要注意每次构建都是在全新隔离环境中执行的，可以配置构建缓存规则把已下载的资源目录缓存起来，减少重复下载的网络耗时
• 针对大体积文件（比如PDF、高清原图）要加上下载失败重试、超时控制逻辑，避免网络波动导致构建失败

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