Next.js 15图片优化超时错误：重启后解决，求永久修复方案

问题复现 #

在Next.js 15搭配Turbopack的项目中，终端反复出现图片优化相关的TimeoutError，错误不影响浏览器图片渲染，开发和生产构建阶段均会触发，重启电脑后自动消失。核心错误信息：

Error: "url" parameter is valid but upstream response timed out
at fetchExternalImage (file:///PROJECTPATH/node_modules/next/src/server/image-optimizer.ts:572:12)
statusCode: 504

项目已正确配置外部图片域名的remotePatterns：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "http",
        hostname: "forkify-api.herokuapp.com",
        port: "",
        pathname: "/images/**",
      },
    ],
  },
};

export default nextConfig;

常见触发原因 #

1. 网络层面
   • 外部图片源本身响应缓慢，Next.js图片优化默认超时时间不足以完成请求
   • 本地网络临时链路阻塞、DNS缓存异常，导致请求外部图片时超时
2. 缓存与进程层面
   • Next.js开发服务器的图片优化缓存进程死锁或资源占用，无法处理新请求
   • Turbopack文件监听缓存与图片优化模块冲突，导致请求队列堆积超时
3. 环境配置
   • 本地防火墙、代理工具临时拦截Next.js服务器向外部图片源的请求
   • Node.js进程网络请求句柄耗尽，无法发起新的图片获取请求

永久修复方案 #

1. 调整图片优化超时时间 #

在next.config.js中增加自定义超时配置，给外部图片源足够响应时间：

const nextConfig = {
  images: {
    remotePatterns: [/* 已有配置 */],
    // 自定义超时时间，单位毫秒，建议设为10000（10秒）
    fetchOptions: {
      timeout: 10000,
    },
  },
};

2. 手动清理缓存与进程 #

无需重启电脑，执行以下命令即可解决进程/缓存异常：

# 清理Next.js缓存
npx next clean
# 杀死所有Node.js进程（开发环境）
pkill -f node
# 重启开发服务器
npm run dev

3. 优化本地网络环境 #

• 刷新本地DNS缓存：Windows执行ipconfig /flushdns；Mac/Linux执行sudo dscacheutil -flushcache
• 关闭可能拦截请求的代理、防火墙工具，或添加Next.js服务器白名单
• 若外部图片源稳定性差，可将图片缓存到本地或使用CDN中转

4. 临时切换到Webpack排查 #

若怀疑是Turbopack兼容性问题，可临时切换回Webpack验证：

npm run dev -- --no-turbopack

若错误消失，可等待Next.js官方修复Turbopack与图片优化模块的兼容性问题。

总结 #

这类超时错误大多由临时的网络/缓存/进程异常导致，重启电脑本质是清理了所有异常进程和缓存。通过调整超时配置、手动清理缓存进程，即可实现永久修复，无需依赖重启系统。

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