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

原因

Next.jsのApp Routerにおいて、middlewareによるリダイレクトを挟んだ際にpublic配下のimage assetが読み込めなくなるとこのエラーがでます

解決策

原因からも分かる通り、対象のassetをリダイレクトの対象外とすればOKです。

公式からの引用ですが、middleware.(js|ts)のmatcherで下記のように定義します。

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     */
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
}

nextjs.org

余談

同じエラーにぶつかった人が、質問する相手を間違えていて微笑ましい気持ちになりました(こういうの丁寧に返事するのも素敵な対応ですね)

help.localizejs.com