NOTE 089 / 2021年
配信先が変わっても壊れないリンク
Next.js の静的配信をサブパスに置いたときの、パス設定の注意点です。
サイトをドメインの直下ではなく、サブパスに置くと、画像やスクリプトの参照先がずれて 404 になることがあります。basePath と assetPrefix の役割を分けて設定し、生成後の HTML で実際のパスを確認するのが確実です。
リンクの生成に使うヘルパーがある場合は、文字列を直接つなげず、そのヘルパーを通します。開発環境では動いても、配信先でだけ壊れる箇所を減らせます。
押さえたい点
- 01basePath と assetPrefix を分けて考える
- 02生成後の HTML でパスを確認する
- 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
- Cloudflare ドキュメント 外部サイトdevelopers.cloudflare.com
- Cloudflare Pages 外部サイトdevelopers.cloudflare.com
- Netlify ドキュメント 外部サイトdocs.netlify.com