Next.jsとヘッダーレスCMSを利用して、マルチ言語サイトを実現する
Next.js+next-intl+Strapi
next.js
strapi

多言語対応が必要なコンテンツの取得元は、データベースとコードが含まれます。

  1. まず、データベースの多言語対応を行います strapi_internationalization.png strapi_content_type_builder.png

  2. 次に、コード定数部分の多言語対応を行います vscode_messages.png

  3. 多言語対応のNext.jsライブラリnext-intlをインポートします

    npm install next-intl
    

    利用方法はhttps://next-intl.dev/docs/getting-started/app-routerを参照してください。

  4. 指定された言語に応じて対応するリソースを取得します vscode_layout.png

  5. 言語切り替えコントロールを実装します