こんにちは！macのタグ機能を最近使い始めた Mizutani(@sirycity) です。Reactは青、Vueは緑とかにするとめっちゃ分かりやすい！

今日はReactフレームワークのNext.jsとGatsby.jsにあるstaticディレクトリとpublicディレクトリについてです。正直割と間違えやすいので自分用のメモを兼ねてまとめてみました。

はじめに

staticディレクトリ、publicディレクトリは静的ファイルを置くためのディレクトリです。OGP画像とかrobots.txtとかads.txtとかfavicon.icoとかそういうのを設置するディレクトリです。こんな感じの静的ファイルを設置する仕組みがNextにもGatsbyにもあるんですが、**割と間違えやすいので(2回目)**それらを整理しようって趣旨の記事です。

結論

• Gatsby.jsの静的ファイルはstaticに置く！
• Next.jsの静的ファイルはv9.1以降はpublicに置く！
• v9.1より前はstaticに置く！

Gatsby

static

Gatsbyのstaticディレクトリはごく普通の静的ファイル置き場です。**https://a.com**っていうドメインがあるとして、**static**ディレクトリに**a.png**ってファイルを置いておけばビルド後に**https://a.com/a.png**でアクセスできます。そんだけ。

public

Gatsbyのpublicディレクトリは触る必要ないです。下手に触らん方が良いです。なぜならビルド後のファイルが置かれるディレクトリだからです。Gatsbyが勝手にいろんなファイルを書き出す場所なんですね。node_modulesみたいなもんだと思えば良いです。

ちなみにpublicの中身はさっきのstaticに配置したファイルたちです(他も色々あるけど)。staticディレクトリにa.pngを置いてビルドしたらpublicディレクトリにa.pngが書き出されます。おおーちゃんと書き出せてるなーってチェック感覚で見るくらいはしても良いかもね。

Next.js

static

Nextの方がstaticpublicは複雑です。まずstaticですが、Nextのバージョンが9.1以上の場合は非推奨です。なので特に考えなくてok。

んでv9.1より前の場合ですが、この場合は一応静的ファイル置き場です。ただ、パスがGatsbyと違うので注意！**https://a.com**っていうドメインの**static**ディレクトリに**a.png**を置いた場合は**https://a.com/static/a.png**でアクセスできます。URLに**static/**が含まれるのがGatsbyとの違いね。ちなみにこのstaticのパスを抜こうとするとちょっと対応が必要だった。

public

んで、v9.1からできたのがpublicディレクトリです。NextのpublicはGatsbyのstaticと全く同じ挙動です。つまり、**https://a.com**の**public**ディレクトリに**a.png**を置いたら**https://a.com/a.png**になります。シンプル。**public/**とかは入りません。

ちなみに、v9.1より前にNextプロジェクトを作っててv9.1以降にバージョンアップしたらパス変えるのめんどくせーってなるかと思うんですが、そういう時はpublicディレクトリの中にstaticディレクトリを作ってそん中にファイル詰め込めばパスはそのままです。**https://a.com/static/a.png**とかで引き続きアクセスできます。

間違えないためのテクニック

何が困るってNextとGatsby両方触ってると混乱するんすね。Nextにstaticディレクトリ作っちゃって警告食らったり、Gatsbyの触っちゃダメなpublicディレクトリ間違えて触っちゃったり。そんなうっかりさんのために、VSCodeの設定ファイルを使ってpublicディレクトリを非表示にしちゃいます！...まあそこそこ有名なやつだけどね。

まずはVSCodeの設定ファイルsettings.jsonを .vscodeディレクトリ配下に設置。.vscodeディレクトリはpackage.jsonとかと同じ階層に設置してね！

mkdir .vscode
touch .vscode/settings.json

んで設定ファイルにこれを書くだけ！

{
 "files.exclude": {
    "**/public": true
  }
}

これでok-

おわりに

...静的ファイルならやっぱ名前はstaticが分かりやすいかなー、と個人的には思います。publicって、フロントエンドのコードは全部パブリックじゃん！？以上。