NOTE 087 / 2021年
静的なサイトで言語を切り替える
Next.js の静的生成で、ロケールごとのページを扱うときの整理です。
言語を切り替えるサイトでは、URL の形を先に決めることが重要です。ロケールをパスに含めるのか、別のドメインにするのかで、生成するページの一覧が変わります。静的な配信では、生成漏れがそのまま 404 になります。
翻訳のないページをどう扱うかも決めておきます。既定の言語に戻すのか、案内を出すのかで、利用者の迷い方が変わります。言語の切り替えは、画面の一部ではなく、サイト全体の設計として扱いましょう。
押さえたい点
- 01URL の形を先に決める
- 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
- TypeScript の設定 外部サイトtypescriptlang.org
- MDN Web Docs 外部サイトdeveloper.mozilla.org
- GitHub Pages 外部サイトdocs.github.com