Webサイトを暫定的にi18n対応しました

注意事項

この記事は、Notion AIに対して

問題と解決策の概要
例示用のコード

を渡して生成した実験的な記事になります。

はじめに

Webサイトを国際化するにあたり、まずはi18n対応を行うことにしました。
しかし、時間の制約があったため、暫定的な対応を行うことになりました。

i18n対応の暫定的な実装

初めに next-i18next を導入したのですが、SSG時にエラーが発生することが分かりました。
そのため、せっかくなので独自実装に切り替えました。
自前実装では、Contextで現時点での言語設定を一時的に保存し、必要に応じてURLの切り替えや出力するテキストを切り替えるようにしています。

github.com

この切り替えでは、前提作業が多いため簡単に書いておくと、

_appx.tsxでI18nApp(App)のようにApp関数をラップする
src/locales/ja.json などの言語ファイルのJSONを作成する
useTranslationなどを使って言語ファイルからテキストを読み取れるようにする
言語切り替えしたいページをsrc/pages/[locale]/X.tsxに配置する

といった手順で切り替えることができます。
これは元々使っていたnext-i18nextに比較的近いインターフェースにしておきました。

またこの実装では、各言語ごとのディレクトリと、必要なファイルが作成されます。

.
├── index.html
├── about.html
├── portfolio.html
├── work.html
├── ja.html
├── en
│   ├── about.html
│   ├── portfolio.html
│   └── work.html
├── ja
    ├── about.html
    ├── portfolio.html
    └── work.html

例えば、/aboutであれば、/en/aboutと/ja/aboutを含めた3ページが実際に生成されることになります。