Zenn
📘

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

2024/09/19に公開
Next.js
middleware
imageerror
tech

概要 | Overview

画像を反映しているページで以下のエラー

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

環境 | Environment

  • Next.js
  • TypeScript
  • App Router

該当箇所

src/app/[lang]/about/page.tsx
...
export default async function About({ params: { lang } }) {
  ...

  return (
    <div className={styles.about}>
      <Image
        className={styles.logo}
        src="/images/logo-m.png" // ⭐️
        alt="Logo"
        width={100}
        height={100}
        priority
      />
...

解決 | Solution

middleware の　matcher で images/ フォルダを非対象にする

src/middleware.ts
...
export const config = {
  // Matcher ignoring `/_next/` and `/api/`
  matcher: ["/((?!api|_next/static|_next/image|images|favicon.ico).*)"],
};

参考 | Reference

https://stackoverflow.com/questions/76286726/nextjs-imageerror-unable-to-optimize-image-and-unable-to-fallback-to-upstream-i

Discussion