Formzodtech成果物https://github.com/underground0930/nextjs-i18next参考にさせて頂いた記事https://blog.arthur1.dev/entry/2023/06/04/100000https://qiita.com/johnmackay150/items/88654e5064290c24a32a主な使用ライブラリNext.jsの他にこれらをインストールしました。翻訳データを返すメソッドと、i18nインスタンスを返します。defaultLanguageは、他の言語で翻訳テキストが指定されていない場合、表示される言語になります。言語が増やす場合に、otherLanguagesの配列に追加していきます。}}langを管理するContextとProviderを用意コード全体で、現在どの言語かを判定するためのLanguagesを管理するためのContextとProviderを用意します。配下に格納する事で、paramsから言語の文字列が取得出来ます。ページ毎にpropsでバケツリレーしても良いですが、この値をProviderにセットすればサイト全体で使用出来ます。毎回langを使用する度に型ガードの実装が必要になり面倒です。LangProviderの外でこのhookを使うと、エラーを投げてくれます。/>}動的なURLのパラメータに応じて、metaも設定したいので、Next.jsが用意している、generateMetadataをページ毎に設定する必要があります。util関数として、setMetadataを設定しました。Componentにしなくてはいけません。ページの詳細の実装は別コンポーネントに切り出しています(今回はTopPageコンポーネント)。_translationsにはページ固有の翻訳テキストデータが格納されています。Groupsを設定することが出来ます。これはURLに影響を与えないのでファイルのグルーピングに便利です。https://nextjs.org/docs/app/building-your-application/routing/colocation#route-groups今回でいうとトップページで使用するファイルは以下のディレクトリにまとめています。アプリケーションを実装することが出来ます。共通のmeta設定用のutil関数ページ毎のgenerateMetadata関数を返す関数。langはurlパラメータから自動的に取得出来ます。翻訳データをページ毎に設定します。}Linkコンポーネントを翻訳用にカスタマイズ先ほど用意したuseLanghookを使って、Linkコンポーネントもカスタマイズします。これでどの言語ページにいても、意識することなくLinkを設定出来ます。)}ページ固有の翻訳データを用意するjaとen以下に対になるようにテキストを用意します。metaには各ページのmetaをtranslationにはコンテンツ部分の翻訳を設定します。i18nextでは、{{count}}のように書くと、変数を文字列の中に埋め込めるので、動的にテキストが変わる場合に便利です。}これまでの設定を元に、実際のページで使用してみるフォームなどのバリデートの翻訳は厄介ですが、react-hook-formとzodResolverを使うと割とスッキリ書けました。)}実際の表示http://localhost:3000/enhttp://localhost:3000/ja最後に国際化対応をする時の参考になれば幸いです。良い方法があれば是非教えてください🙏🙏🙏HTMLGO埼玉在住のフリーランスのフロントエンドエンジニアバッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフトカードが還元されます。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。