Intlayer でコンポーネントを多言語対応（i18n）にする方法

このガイドでは、2つの一般的なセットアップで UI コンポーネントを多言語対応にするための最小限の手順を示します：

• React (Vite/SPA)
• Next.js (App Router)

まずコンテンツを宣言し、その後コンポーネント内で取得します。

1) コンテンツを宣言する（React と Next.js 共通）

コンポーネントの近くにコンテンツ宣言ファイルを作成します。これにより、翻訳が使用される場所に近くなり、型安全性も確保されます。

import { t, type Dictionary } from "intlayer";const componentContent = {  key: "component-example",  content: {    title: t({      en: "Hello",      fr: "Bonjour",      es: "Hola",    }),    description: t({      en: "A multilingual React component",      fr: "Un composant React multilingue",      es: "Un componente React multilingüe",    }),  },} satisfies Dictionary;export default componentContent;

設定ファイルとして JSON を使いたい場合もサポートされています。

{  "$schema": "https://intlayer.org/schema.json",  "key": "component-example",  "content": {    "title": {      "nodeType": "translation",      "translation": { "en": "Hello", "fr": "Bonjour", "es": "Hola" }    },    "description": {      "nodeType": "translation",      "translation": {        "en": "多言語対応のReactコンポーネント",        "fr": "Un composant React multilingue",        "es": "Un componente React multilingüe"      }    }  }}

2) コンテンツの取得

ケースA — Reactアプリ（Vite/SPA）

デフォルトの方法：キーで取得するために useIntlayer を使用します。これによりコンポーネントはシンプルかつ型安全に保たれます。

import { useIntlayer } from "react-intlayer";export function ComponentExample() {  const content = useIntlayer("component-example");  return (    <div>      <h1>{content.title}</h1>      <p>{content.description}</p>    </div>  );}

サーバーサイドレンダリングやプロバイダー外での使用：react-intlayer/server を使用し、必要に応じて明示的に locale を渡します。

import { useIntlayer } from "react-intlayer/server";export function ServerRenderedExample({ locale }: { locale: string }) {  const content = useIntlayer("component-example", locale);  return (    <>      <h1>{content.title}</h1>      <p>{content.description}</p>    </>  );}

代替案：呼び出し元で構造をまとめておきたい場合は、useDictionary を使って宣言済みのオブジェクト全体を読み取ることができます。

import { useDictionary } from "react-intlayer";import componentContent from "./component.content";export function ComponentWithDictionary() {  const { title, description } = useDictionary(componentContent);  return (    <div>      <h1>{title}</h1>      <p>{description}</p>    </div>  );}

ケースB — Next.js（App Router）

データの安全性とパフォーマンスのためにサーバーコンポーネントを優先してください。サーバーファイルでは next-intlayer/server から useIntlayer を使用し、クライアントコンポーネントでは next-intlayer から useIntlayer を使用します。

import { useIntlayer } from "next-intlayer/server";export default function ServerComponent() {  const content = useIntlayer("component-example");  return (    <>      <h1>{content.title}</h1>      <p>{content.description}</p>    </>  );}

"use client";import { useIntlayer } from "next-intlayer";export function ClientComponent() {  const content = useIntlayer("component-example");  return (    <div>      <h1>{content.title}</h1>      <p>{content.description}</p>    </div>  );}

ヒント: ページのメタデータやSEOのために、getIntlayer を使用してコンテンツを取得し、getMultilingualUrls を使って多言語URLを生成することもできます。

なぜIntlayerのコンポーネントアプローチが最適なのか

• コロケーション: コンテンツの宣言がコンポーネントの近くに存在するため、ズレが減り、デザインシステム全体での再利用が向上します。
• 型安全性: キーや構造が強く型付けされており、翻訳の欠落は実行時ではなくビルド時に検出されます。
• サーバーファースト: サーバーコンポーネントでネイティブに動作し、セキュリティとパフォーマンスを向上させます。クライアントフックは引き続き使いやすいままです。
• ツリーシェイキング: コンポーネントで使用されるコンテンツのみがバンドルされるため、大規模アプリでもペイロードを小さく保てます。
• DX（開発者体験）＆ツール: 組み込みのミドルウェア、SEOヘルパー、オプションのビジュアルエディター／AI翻訳が日々の作業を効率化します。

Next.jsに特化した比較とパターンのまとめはこちらをご覧ください: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer

関連ガイドと参考資料

• Reactセットアップ（Vite）: https://intlayer.org/doc/environment/vite-and-react
• React Router v7: https://intlayer.org/doc/environment/vite-and-react/react-router-v7
• TanStackスタート: https://intlayer.org/doc/environment/vite-and-react/tanstack-start
• Next.js セットアップ: https://intlayer.org/doc/environment/nextjs
• なぜ Intlayer を選ぶのか vs. next-intl vs. next-i18next: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer

これらのページには、エンドツーエンドのセットアップ、プロバイダー、ルーティング、および SEO ヘルパーが含まれています。