【JS】Next.jsとGatsby.jsのstaticとpublicディレクトリについて
こんにちは!macのタグ機能を最近使い始めたMizutani(@sirycity)です。Reactは青、Vueは緑とかにするとめっちゃ分かりやすい!
今日はReactフレームワークの[Next.js](https ://nextjs.org/)と[Gatsby.js](https ://www.gatsbyjs.com/)にある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って、フロントエンドのコードは全部パブリックじゃん!?以上。
LINK
TAGS
LATESTS
POPULAR
- CSS2021/04/29【CSS】右寄せの方法は結局flexが一番良さそう
- React2020/07/13【JS】Reactのstyleの使い方、書き方いろいろ
- Payment2021/10/16GooglePayでVisaタッチを使う時に知っておきたい過酷な現実【追記あり】
- Others2021/07/11Slackに予約投稿機能ができて嬉しいけどそれでもまだ少し不満な理由【追記あり】
- CSS2020/04/30【CSS】tailwind.cssでよく使うデザインパターン
- CSS2019/03/30【CSS】100vhは「一画面」ではないという罠
- CSS2020/06/09【CSS】max-font-sizeやmin-font-sizeを使いたくなったら
- Vue2019/06/29【JS】Vueの:classの書き方3通り
- JavaScript2020/09/02【JS】yarnの長所とyarnからnpmに戻ってきた理由
- React2020/06/04【JS】ReactのclassNameの色々な書き方紹介