はじめに

この記事は、GPT-4oによって生成された内容です。Next.jsを使用して多言語対応の静的サイトを構築する方法について説明します。特に、メイン言語にはURLプレフィックスを付けず、その他の言語にはプレフィックスを付ける設定に焦点を当てます。GitHub Pagesを使用してデプロイする設定も含まれています。

プロジェクトのセットアップ

まず、Next.jsのプロジェクトを作成します。create-next-appを使用してプロジェクトを初期化します。

npxcreate-next-app@latestnext-intl-ssg

必要なパッケージのインストール

多言語対応のために、next-intlをインストールします。

npminstallnext-intl

プロジェクト構成

プロジェクトのディレクトリ構成は以下の通りです。

  • src/app/[locale]/about/page.tsx
  • src/app/about/page.tsx
  • src/lib/i18n.ts
  • src/components/I18nProvider.tsx
  • src/i18n/ja.json
  • src/i18n/en.json

多言語対応の実装

next-intlを使用して、言語ごとのメッセージを管理します。src/lib/i18n.tsでメッセージを取得する関数を定義しています。

e}xproertturansy(nacwafiutncitmipoonrtg(e`t@M/eis1s8ang/e$s{(llooccaallee}:.jsstorni`n)g)).d{efault;

I18nProviderコンポーネントを使用して、各ページでメッセージを提供します。

iie}}}mmx:)pppclmclmr)ooohoe{hoe{e;rrricsicst<tttlaslasuN/dladlare{N{{dregregnxceee,ee:ethxRNfnsns(Iiteea,:s:nlIaxuttdnctlRrRlrttIteieCelNnanclnCotfcgoi}ldlut;reieCnNdnelco<tn}itdsPteietrPfno;rorrtnivooPnivmrIgdio1,ed'v8rerinRredPel>aercocrooctvra'}idl;d<efes=rrt{o(rlm{ionc'gan,leexs}tt-rmiiennstgsl>a'>g;;es={messages}>

SSGの設定

generateStaticParams関数を使用して、静的ページを生成する際のパラメータを設定します。メイン言語（日本語）にはプレフィックスを付けず、その他の言語にはプレフィックスを付けます。

e}xpr}soe)rrtl)ctuo;/rcafnapulpnle/co[tcliaoolcneaslg.eef]ni/elartbaeotrue(tSl/topacatagilece.Pta=sr>xamlso(c)al{e!=='ja').map(locale=>({

GitHub Pagesへのデプロイ

GitHub Actionsを使用して、GitHub Pagesにデプロイします。.github/workflows/deploy.ymlでデプロイの設定を行います。

nopcjaneoom:pwrcpingcbbdeuomoadcrasue:sbring-uon:irspernshrkstetruclutlnuetD:afsesorpedne-----ovnee-enlin:ke:l:spyisdppcooten--snunuwnrnrnuw:r-ssniulhwnswnc"io:asasiauauasioo::adsoe_s:r:ypnnmemetncmnmnmetpnnm:eysd:i:a-:eseshoae:e:esham:bes:irtwgp:::::dc:::::teu:d:tseereruehnnhnuieo[paisobCaSa-eIpBpUa:tblDpamadt"guhcecv:nmumpc:udelcGaternetttesiltnpotiicetciuir"tclroigtlyitnhsukoposnaiduaooiuomoH]:s-onniplndnut-yenu:lusNsomlsthlnsbat/o/n"ba/uatt/ftcds:durubtodPaeheeeitp-eealset"plilpsGpgstcu2edfoatileekp0naagtoso-"dcdeHyunet-su-tonpbp@dcaaveigPg4@eeaevssgs4-e@asvr4tifact@v3

リンク

まとめ

このブログでは、Next.jsを使用して多言語対応の静的サイトを構築し、メイン言語にはプレフィックスを付けず、その他の言語にはプレフィックスを付ける方法を紹介しました。next-intlを活用することで、簡単に多言語対応が可能になります。ぜひ試してみてください。