Next.jsで本番環境で画像が表示されない場合の対処法

next-authで要認証の対象にpublicフォルダがはいってしまっていないか

console.logなどで画像GETリクエストが401エラーになっていることが確認できた場合、この可能性が高い。
例えば画像をpublic/imagesなどに入れ、middlewareのmatcherでimagesフォルダを弾く。

/**
 * ログインが必要なパスを指定
 * NOTE: next-authで独自フォームによるログインをするため、無視するパスにauthを追加
 * NOTE: surveysはログイン対象外にしたいため追加
 */
export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico|icon.ico|images|auth).*)',
  ],
};

画像最適化に失敗している

ImageOptimizerに失敗している場合。
一度ローカルでnext buildしたあとにnext startしてみて、画像が表示されるページへ行き、次のようなエラーがでていないかチェックする。

sharpが存在しないエラー

'sharp' is required to be installed in standalone mode for the image optimization to function correctly.

dockerなどでstandaloneモードで起動している際は、sharpをインストールする必要がある。

https://nextjs.org/docs/messages/install-sharp

画像が取得できていないエラー

The requested resource isn’t a valid image for /images/ほげほげ.png received text/html; charset=utf-8
ImageError: The requested resource isn’t a valid image.

日本語のファイル名だとnext build時に画像生成がコケている可能性がある。一度ファイル名をアルファベットだけにして、もう一度next build next startでエラーがでないかチェックする。