これは何？
「画像パスを変数に入れて参照したいけど、どこからのパスを書けばいいの……？？？？」
となったので、画像が /public/ にある時とそうでない時での画像パスの書き方について、下記2つでまとめました。
- パスで参照して持ってくる
- importで持ってくる
※Next.jsのバージョンは14.2.3（App Router）です。
📁/public/に画像があるとき
①パスで参照して持ってくる
/hogehoge.jpg でOK。/public いらないです！ ただ、絶対パス・相対パスはNGでした。
// OK
const eyecatch = "/hogehoge.jpg";
// imagesフォルダにある時はこれでOK
const eyecatch = "/images/hogehoge.jpg";
// NG
const eyecatch = "/public/images/hogehoge.jpg";
const eyecatch = "../../public/images/hogehoge.jpg";
constants.jsで画像パスを持たせる場合など、変数でパスを宣言する時に役立ちますね。
ちなみに /public いらないについては、下記に書いてありました。
Files inside public can then be referenced by your code starting from the base URL (/).
②importで持ってくる
こっちは/publicがいります。 相対パス・絶対パスなら大丈夫。
configファイルでエイリアスを設定すれば、エイリアスパスにもできるはず。
// OK
import eyecatch from "../../public/images/hogehoge.jpg";
import eyecatch from "/public/images/hogehoge.jpg";
// configでエイリアスを設定していれば@もOKのはず
import eyecatch from "@/images/hogehoge.jpg";
// NG
import eyecatch from "/images/hogehoge.jpg";
📁/src/images/など（public以外に画像があるとき）
①パスで参照して持ってくる
なんと、 できないです。
なのでどうしても使いたい時は、publicに画像を移してしまうか、importするのが良いかと思います。
// OKはない
// NG
const eyecatch = "/src/images/hogehoge.jpg";
const eyecatch = "../images/hogehoge.jpg";
②importで持ってくる
絶対パス、相対パスやエイリアスパスもできます。
// OK
import eyecatch from '/src/images/hogehoge.jpg';
import eyecatch from '../images/hogehoge.jpg';
// configでエイリアスを設定していれば@もOK
import eyecatch from '@/images/hogehoge.jpg';
最後に
「画像パスを変数に入れて参照したいけど、どこからのパスを書けばいいの……？？？？」の答えは、「/public/以降のパスから！」 ってことで良いかと思います。
間違っていたらご指摘ください……！
パスを扱う静的なアセット（画像のみならず、robots.txtやhtmlファイルも）はpublicに入れるのが良さそうです。
書き方による細かな違いがありそうですが、また調べます✍️