Next.js(SSG)でImageタグではなくimgタグを利用する

Next.jsには画像最適化のための専用コンポーネントであるImageが用意されていますが、next exportによる静的サイト生成（SSG）を行う場合には、このImageが使用できません。そのため、代わりに標準のimgタグを使う必要があります。

なぜImageが使えないのか？

Next.jsのImageコンポーネントは、画像を動的に最適化するために内部でNext.jsサーバーを利用しています。しかし、next exportではすべてのページが完全な静的HTMLとして書き出されるため、サーバー側の最適化処理が動作せず、画像の読み込みが失敗することがあります。

このため、静的エクスポートするサイトでは、Imageではなくimgタグを使用して、直接画像を表示する方法が推奨されます。

例：imgタグの使用

1export default function SampleImage() {
2  return (
3    <img src="/images/sample.jpg" alt="サンプル画像" width="600" height="400" />
4  );
5}
6

画像ファイルはpublicディレクトリ内に配置し、パスは/images/sample.jpgのように指定します。

TypeScriptでの対応方法

imgタグの使用自体に問題はありませんが、eslint-plugin-jsx-a11yなどを導入している場合、alt属性の指定が無いと警告が出ることがあります。アクセシビリティの観点からもalt属性は必ず指定しましょう。

TypeScriptの補完・型エラー対策

Next.jsが提供するImageに依存しない場合、設定を明確にしておくことで、チーム開発でも混乱を防げます。たとえば、ESLintでImage使用を強制しないようにルールを無効化することができます。

1{
2  "rules": {
3    "@next/next/no-img-element": "off"
4  }
5}
6

これは.eslintrc.jsonなどのESLint設定ファイルに記述します。

まとめ

• next exportを使用するSSGサイトではImageが使えません
• 代わりにimgタグを使って画像を表示しましょう
• 画像はpublicフォルダに配置し、絶対パスで指定します
• ESLintルールでimg使用への警告を無効化することも可能です