🖼

Next.js 12.2のMiddlewareで画像が見えなくなった場合の対処法

2022/07/04に公開約800字

Next.js 12.2では、Middlewareが安定版になったと同時に、多数の破壊的変更が盛り込まれることになった。

その中に、_nextディレクトリでもMiddlewareを介すようになった、というものがある。

つまり、何も考えずにあらゆるパスをリダイレクトすると、<Image />と併用したとき、一部のパターンでは画像が見えなくなる。

問題が発生する状況

今までは、

  • 画像を除外したい
  • pathnameにドットがあれば除外
  • あとは全部リダイレクト

という流れでMiddlewareを書けば、普通に動いていた。

が、Next12.2にアップデートした途端、画像が死ぬ。 なぜかというと、next/imageのpathnameは_next/imageだからである。無駄にリダイレクトが働き、画像が見えなくなってしまうのだ。

対処法

https://github.com/vercel/platforms/blob/main/middleware.ts

例えば、VercelのPlatforms Exampleではホスト名によってpages/_sites/[site]へリダイレクトが行われる。

上記の例は12.2に対応できている。なぜなら**matcherが設定されている**からだ。

src/middleware.ts
export const config = {
  matcher: [
    "/",
    "/([^/.]*)", // 画像等を除外
    "/_sites/:path*",
  ],
};

例えばこういうふうに設定すればいい。

GitHubで編集を提案

Discussion

ログインするとコメントできます