CODEWITHSUNDEEP
next.jsimage-optimizationnext.js15
The Finder
The Finder

Reputation: 53

Next.js 15 Image Optimization Timeout Error Resolved After Restart PC

Problem and Solution Summary

In a Next.js project, I encountered a recurring TimeoutError related to image optimization in the terminal, which did not affect image rendering in the browser. This error was present during development and production builds. After restarting my computer, the error disappeared without further changes.

[Error [TimeoutError]: The operation was aborted due to timeout] {
  code: 23,
  INDEX_SIZE_ERR: 1,
  DOMSTRING_SIZE_ERR: 2,
  HIERARCHY_REQUEST_ERR: 3,
  WRONG_DOCUMENT_ERR: 4,
  INVALID_CHARACTER_ERR: 5,
  NO_DATA_ALLOWED_ERR: 6,
  NO_MODIFICATION_ALLOWED_ERR: 7,
  NOT_FOUND_ERR: 8,
  NOT_SUPPORTED_ERR: 9,
  INUSE_ATTRIBUTE_ERR: 10,
  INVALID_STATE_ERR: 11,
  SYNTAX_ERR: 12,
  INVALID_MODIFICATION_ERR: 13,
  NAMESPACE_ERR: 14,
  INVALID_ACCESS_ERR: 15,
  VALIDATION_ERR: 16,
  TYPE_MISMATCH_ERR: 17,
  SECURITY_ERR: 18,
  NETWORK_ERR: 19,
  ABORT_ERR: 20,
  URL_MISMATCH_ERR: 21,
  QUOTA_EXCEEDED_ERR: 22,
  TIMEOUT_ERR: 23,
  INVALID_NODE_TYPE_ERR: 24,
  DATA_CLONE_ERR: 25
}

Error: "url" parameter is valid but upstream response timed out
    at fetchExternalImage (file:///PROJECTPATH/node_modules/next/src/server/image-optimizer.ts:572:12)
    at async DevServer.imageOptimizer (file:///PROJECTPATH/node_modules/next/src/server/next-server.ts:649:10)
    at async cacheEntry.imageResponseCache.get.routeKind (file:///PROJECTPATH/node_modules/next/src/server/next-server.ts:888:14)
    at async (file:///PROJECTPATH/node_modules/next/src/server/response-cache/index.ts:124:29)
    at async (file:///PROJECTPATH/node_modules/next/src/lib/batcher.ts:78:23) {
  statusCode: 504
}

Details

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

export default nextConfig;

Has anyone else experienced a similar issue with Next.js image optimization or found a more permanent fix? Could this be related to a network, cache, or specific environment setting that might occasionally interfere with Next's image optimization?

Upvotes: 3

Views: 770

Answers (1)

Bill.zhanxg
Bill.zhanxg

Reputation: 53

If the image load more than seven second, it will throw timeout error on nextjs image optimisation server (Nextjs 15). This restriction has been added through this commit after digging in the source code for a bit: https://github.com/vercel/next.js/pull/65821

https://github.com/vercel/next.js/blob/720fe3577eb58050966a44bc1fa88e01fcac3962/packages/next/src/server/image-optimizer.ts#L568

The only way to bypass this restriction currently is by using another image optimisation service or don't optimise the image at all. You can achieve it by not using next/Image or pass an custom image loader file in next.config.ts

loader: 'custom',
loaderFile: './image-loader.ts',

docs: https://nextjs.org/docs/app/api-reference/next-config-js/images

I have created a discussion in next repo: https://github.com/vercel/next.js/discussions/72951

Upvotes: 3

Related Questions