AWS S3環境でNext.jsプロジェクトを多言語対応する

Arthurさんの記事の通りに実装する。
https://blog.arthur1.dev/entry/2023/06/04/100000?amp=1

パスに言語名を含める方針を採り、パスに言語名が見当たらないときはデフォルトの言語を入れて呼び出すようにする。それぞれのコンポーネントの中で、翻訳を返すカスタムフックを呼ぶ。

レイアウトを分けるやり方はここで初めて知った。

カスタムフックuseTranslationの中で、react-i18nを呼び出しているので非同期関数になる。このせいでページコンポーネントが非同期関数というなかなか珍しい形になってしまう。

そのため、静的生成したファイルをS3にデプロイすると、初回アクセスやブラウザバックでアプリケーションエラーを起こす。

そこで、react-i18nを排除する。これは意外と簡単で、i18nオブジェクトを単なる連想配列にするだけでいい。どうせjsonファイルを呼び出せば済むのだから、型付けさえうまくやればすぐに動くようになる。

その後、ルーティングを対応させるために、next.config.jsにoutput: "export"とtrailingSlash: trueを追加すれば、無事に動くようになった。