NextJS ImageError: Unable to optimize image and unable to fallback to upstream image

Question

I created middleware and add matcher /((?!api|_next/static|_next/image|favicon.ico|auth/login).*) in config middleware. When I try to run npm run dev.The result comes out like this:

ImageError: Unable to optimize image and unable to fallback to upstream image
    at imageOptimizer (C:\work\internal-dashboard\node_modules\next\dist\server\image-optimizer.js:563:19)
    at async cacheEntry.imageResponseCache.get.incrementalCache (C:\work\internal-dashboard\node_modules\next\dist\server\next-server.js:238:72)
    at async C:\work\internal-dashboard\node_modules\next\dist\server\response-cache\index.js:83:36 {
  statusCode: 400
}
ImageError: Unable to optimize image and unable to fallback to upstream image
    at imageOptimizer (C:\work\internal-dashboard\node_modules\next\dist\server\image-optimizer.js:563:19)
    at async cacheEntry.imageResponseCache.get.incrementalCache (C:\work\internal-dashboard\node_modules\next\dist\server\next-server.js:238:72)
    at async C:\work\internal-dashboard\node_modules\next\dist\server\response-cache\index.js:83:36 {
  statusCode: 400
}

Before I added middleware this was not happening, this happened when I added config matcher in middleware. Here is the config matcher on the middleware I made:

export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico|auth/login).*)',
    '/partner/:path*'
  ],
};

I am trying to omit _next/image from the middleware matcher. As a result, some images cannot be loaded.

Is there a way to solve the case? or maybe I forgot something when I made middleware?

Osyth

Answer 1

This problem started to occur when I added middleware.[jt]s. I realised that all of the paths are being matched by it.

So I added this:

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)']
}

but it didn't work.

Later I updated the regex to include images folder as well because I have my images as public/images/my-image.png.

So, my working regex now looks like this:

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|images|favicon.ico).*)']
}

Diff TLDR

 export const config = {
-  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)']
+  matcher: ['/((?!api|_next/static|_next/image|images|favicon.ico).*)']
 }

Sharlenesharline

thanks for the answer, this way works fine. I will learn more about matcher – Osyth

Answer 2

I had exactly the same problem although my matcher in middleware was configured correctly. What resolved my issue was changing this:

<Image src="/logo.webp" width="..." height="..." alt="..." />

to this:

import Logo from "@/public/logo.webp"
<Image src={Logo} width="..." height="..." alt="..." />

Note: this is documented in https://nextjs.org/docs/app/building-your-application/optimizing/images#local-images

Rupe

Answer 3

I've the same problem, I realized when i put a console, the middleware try to execute an request to my localhost + name of the image, for instance http://localhost:3000/logo.png. So, to solve the problem a include, the image name on the macher - to excluse my image.

  url: 'http://localhost:3000/logo.png',
  bodyUsed: false,
  cache: 'default',
  credentials: 'same-origin',
  destination: '',
  headers: {
  accept: 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8',
  accept-language: 'en-US,en;q=0.9,pt;q=0.8',
  connection: 'close',
  cookie: 'NEXT_LOCALE=es; i18next=pt',
  host: 'localhost:3000',
  if-none-match: 'jJikJHW-EIDJaRhW6K+moiS2QS9vmG+6h9x5+FQI6u8=',
  referer: 'http://localhost:3000/pt',
  sec-ch-ua: '"Google Chrome";v="113", "Chromium";v="113", "Not-A.Brand";v="24"',
  sec-ch-ua-mobile: '?0',
  sec-ch-ua-platform: '"macOS"',
  sec-fetch-dest: 'image',
  sec-fetch-mode: 'no-cors',
  sec-fetch-site: 'same-origin',
  user-agent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36',
  x-forwarded-for: '::1',
  x-forwarded-host: 'localhost:3000',
  x-forwarded-port: '3000',
  x-forwarded-proto: 'http',
  x-invoke-path: '',
  x-invoke-query: '',
  x-middleware-invoke: '1'
},
  integrity: '',
  keepalive: false,
  method: 'GET',
  mode: 'cors',
  redirect: 'follow',
  referrer: 'about:client',
  referrerPolicy: '',
  signal: AbortSignal {
  [Symbol(kAborted)]: false,
  [Symbol(kReason)]: undefined,
  [Symbol(kOnabort)]: undefined,
  [Symbol(realm)]: { settingsObject: { baseUrl: undefined } }
}
}
ImageError: Unable to optimize image and unable to fallback to

Solution:

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|assets|favicon.ico|logo.png|sw.js).*)']
};

Postmaster

Yeah, this answer can also be used for assets in public folders. Thanks for the answer – Osyth