【Next.js】静的な画像ファイルの表示方法

はじめに

今回は、Next.jsでImageコンポーネントを用いて静的な画像ファイルを表示する方法を、備忘録として書いていきます。
Next.jsのバージョンは14.1.0です。

静的な画像ファイルの表示

以下の記事で紹介されている通りです。
https://qiita.com/P-man_Brown/items/ed564ae4ea3c8eacfd4f
本記事では、より簡潔に書き記しておきます。

publicディレクトリ配下に画像を置く

publicディレクトリ直下に、表示させたい画像sample.pngを置きます。
拡張を考慮して、/public/sample/sample.pngなどどしても良いです。

├── app
│   ├── page.tsx
├── public
│   ├── sample.png
│   ├── next.svg
│   └── vercel.svg

page.tsxの中身を記述する

Imageコンポーネントを使用します。

import Image from "next/image";

export default function Home() {
    return (
        <div>
          <h1>Hello World</h1>
        </div>
        <div>
          <Image
            src="/sample.png" //配置した画像のパスを記述する。
            alt="Top Image"
            layout="fill"
            objectFit="cover"
          />
        </div>  
    )
}

実行すると、画像が表示されます。