NOTE 085 / 2021年
静的ファイルを置く前に決めること
静的配信でつまずきやすい、パスと 404 の扱いを整理します。
読了目安 約2分
GitHub Pages は手軽に静的ファイルを配れる一方で、サーバー側の制御ができません。サブパスに置く場合の basePath、末尾のスラッシュ、404 の返し方を事前に決めておく必要があります。
直接開いたときに 404 になるページは、生成されたファイルの場所とリンクの形を突き合わせて確認します。ビルドの設定だけでなく、生成物をそのまま見ることが解決の近道です。
押さえたい点
- 01basePath と公開先を揃える
- 02末尾のスラッシュを統一する
- 03生成物のパスを直接確認する
参考資料
外部サイトが開きます。内容は各サイトの管理下にあります。
- Next.js ドキュメント 外部サイトnextjs.org
- Next.js 学習 外部サイトnextjs.org
- Vercel ドキュメント 外部サイトvercel.com
- TypeScript ドキュメント 外部サイトtypescriptlang.org
- React 学習ガイド 外部サイトreact.dev
- React リファレンス 外部サイトreact.dev
- React で考える 外部サイトreact.dev
- useState リファレンス 外部サイトreact.dev
- useEffect リファレンス 外部サイトreact.dev
- useContext リファレンス 外部サイトreact.dev
- Nuxt 入門 外部サイトnuxt.com
- Vite ガイド 外部サイトvitejs.dev
- Cloudflare ドキュメント 外部サイトdevelopers.cloudflare.com