Next.jsにおいて、staticフォルダの中にいれた画像が表示できません。

Question

写真に載せたようなファイル構造でNext.jsの勉強をしているのですが、画像を表示したくstaticフォルダを作成し、その中に表示したい画像を入れました。

これを以下のようなコードで表示しようとしたところ、表示されません。ミスの箇所を指摘していただきたいです。

import Link from "next/link";
import Layout from "../components/Layout"
import Image from "../static/Image";

export default()=>(
    <Layout header="Next" title="Top page.">
    <p>Welcome to next.js!</p>

    {/* この部分です */}
    <img src="/static/image.png"/>
    {/*  */}
    
    <hr/>
    <Link href="./other">
        <button>go to Other &gt;&gt;</button>
    </Link>
    </Layout>
);

Answer 1

ページ以外のファイルは./public/フォルダ下に入れてください。

.
├── components
│  └── <Reactコンポーネント...>
├── package.json
├── pages
│  └── <Reactで書かれたページ...>
└── public
   └── <静的なファイル...>

Comments

[mikan_professor]

解決しました。ありがとうございました。

Answer 2

相対パスで記述してみてはどうですか？

Comments

[mikan_professor]

ご回答ありがとうございます。

srcを
"../static/image.png"
"./static/image.png"
など様々試してみましたがだめでした。