著者:
    作成:2025-09-09最終更新:2026-05-31

    Intlayerを使用してTanStack Startウェブサイトを翻訳する | 国際化（i18n）

    目次

    このガイドでは、ロケール対応のルーティング、TypeScriptサポート、および最新の開発手法を使用して、TanStack StartプロジェクトにIntlayerをシームレスに統合し、国際化を実現する方法を説明します。

    代替手段ではなく Interlayer を使用する理由

    「react-i18next」、「use-intl」、または「paraglide」などの主要なソリューションと比較して、Intlayer は次のような統合された最適化を備えたソリューションです。

    TanStack Start を完全にカバー

    Intlayer は TanStack Start 用に完全に最適化されており、多言語ルーティング、Cookie 管理、サイトマップ生成、動的コンテンツ読み込み、および国際化 (i18n) の取り組みを拡張するために必要なすべての機能を提供します。

    バンドルサイズ

    大量の JSON ファイルをページにロードするのではなく、必要なコンテンツのみをロードします。 Intlayer は、バンドルとページのサイズを最大 50% 削減するのに役立ちます。

    保守性

    アプリケーションのコンテンツのスコープを設定すると、大規模なアプリケーションの メンテナンスが容易になります。コンテンツ コードベース全体を確認するという精神的な負担を負うことなく、単一の機能フォルダーを複製または削除できます。さらに、Intlayer は完全に型指定されており、コンテンツの正確性を保証します。

    AI エージェント

    コンテンツを同じ場所に配置すると、大規模言語モデル (LLM) によって 必要なコンテキストが削減されます。 Intlayer には、翻訳の欠落をテストする CLI、LSP、MCP などのツール スイートも付属しています。および エージェント スキル により、AI エージェントの開発者エクスペリエンス (DX) がさらにスムーズになります。

    オートメーション

    AI プロバイダーの費用で、選択した LLM を使用して CI/CD パイプラインで自動化を変換します。 Intlayer は、コンテンツ抽出を自動化する コンパイラー と、バックグラウンドでの翻訳を支援する Web プラットフォーム も提供します。

    パフォーマンス

    大量の JSON ファイルをコンポーネントに接続すると、パフォーマンスと反応性の問題が発生する可能性があります。 Intlayer は、ビルド時のコンテンツの読み込みを最適化します。

    非開発によるスケーリング

    Intlayer は単なる i18n ソリューションではなく、自己ホスト型 ビジュアル エディター と 完全な CMS を提供します。 リアルタイムで多言語コンテンツを管理できるようになり、翻訳者、コピーライター、その他のチーム メンバーとのコラボレーションがシームレスになります。コンテンツはローカルおよび/またはリモートに保存できます。

    TanStack StartアプリケーションでIntlayerをセットアップするためのステップバイステップガイド

    www.youtube.com

    GitHubのアプリケーションテンプレートを参照してください。

    1. プロジェクトの作成

      まず、TanStack Startウェブサイトのプロジェクトの開始ガイドに従って、新しいTanStack Startプロジェクトを作成します。

    2. Intlayerパッケージのインストール

      好みのパッケージマネージャーを使用して、必要なパッケージをインストールします：

      bash
      npm install intlayer react-intlayernpm install vite-intlayer --save-devnpx intlayer init

      • intlayer

        構成管理、翻訳、コンテンツ宣言、トランスパイル、およびCLIコマンドのための国際化ツールを提供するコアパッケージです。

      • react-intlayer IntlayerをReactアプリケーションと統合するパッケージです。Reactの国際化のためのコンテキストプロバイダーとフックを提供します。

      • vite-intlayer IntlayerをViteバンミラーと統合するためのViteプラグイン、およびユーザーの優先ロケールの検出、クッキーの管理、URLリダイレクトの処理のためのミドルウェアが含まれています。

    3. プロジェクトの構成

      アプリケーションの言語を構成するための設定ファイルを作成します：

      intlayer.config.ts
      import type { IntlayerConfig } from "intlayer";import { Locales } from "intlayer";const config: IntlayerConfig = {  internationalization: {    defaultLocale: Locales.ENGLISH,    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],  },};export default config;
      この構成ファイルを通じて、ローカライズされたURL、ミドルウェアのリダイレクト、クッキー名、コンテンツ宣言の場所と拡張子、コンソールでのIntlayerログの無効化などを設定できます。利用可能なパラメータの完全なリストについては、構成ドキュメントを参照してください。

    4. Vite構成へのIntlayerの統合

      構成にintlayerプラグインを追加します：

      vite.config.ts
      import { tanstackStart } from "@tanstack/react-start/plugin/vite";import viteReact from "@vitejs/plugin-react";import { nitro } from "nitro/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";const config = defineConfig({  plugins: [    nitro(),    intlayer(),    tanstackStart({      router: {        routeFileIgnorePattern:          ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$",      },    }),    viteReact(),  ],});export default config;
      intlayer() Viteプラグインは、IntlayerをViteと統合するために使用されます。コンテンツ宣言ファイルの構築を確実にし、開発モードでそれらを監視します。Viteアプリケーション内でIntlayer環境変数を定義します。さらに、パフォーマンスを最適化するためのエイリアスを提供します。

    5. ルートレイアウトの作成

      useParamsを使用して現在のロケールを検出し、htmlタグにlangおよびdir属性を設定することで、国際化をサポートするようにルートレイアウトを構成します。

      src/routes/__root.tsx
      import {  createRootRouteWithContext,  HeadContent,  Scripts,} from "@tanstack/react-router";import { defaultLocale, getHTMLTextDir } from "intlayer";import { type ReactNode } from "react";import { IntlayerProvider } from "react-intlayer";import { Route as LocaleRoute } from "./{-$locale}/route";export const Route = createRootRouteWithContext<{}>()({  head: () => ({    meta: [      {        charSet: "utf-8",      },      {        content: "width=device-width, initial-scale=1",        name: "viewport",      },      {        title: "TanStack Start Starter",      },    ],  }),  shellComponent: RootDocument,});function RootDocument({ children }: { children: ReactNode }) {  const params = LocaleRoute.useParams();  const locale = params?.locale ?? defaultLocale;  return (    <html dir={getHTMLTextDir(locale)} lang={locale}>      <head>        <HeadContent />      </head>      <body>        <IntlayerProvider locale={locale}>{children}</IntlayerProvider>        <Scripts />      </body>    </html>  );}
      コンテンツを alt、title、href、aria-label などの string 属性で使用したい場合は、関数の値を使用できます。例：
      html
      <img src="{content.image.src.value}" alt="{content.image.value}" /><img src="{content.image.src.toString()}" alt="{content.image.toString()}" /><img src="{String(content.image.src)}" alt="{String(content.image)}" />

    6. ロケールレイアウトの作成

      ロケール接頭辞を処理し、検証を実行するレイアウトを作成します。

      src/routes/{-$locale}/route.tsx
      import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";import { validatePrefix } from "intlayer";export const Route = createFileRoute("/{-$locale}")({  beforeLoad: ({ params }) => {    const localeParam = params.locale;    // ロケール接頭辞を検証する    const { isValid, localePrefix } = validatePrefix(localeParam);    if (!isValid) {      throw redirect({        to: "/{-$locale}/404",        params: { locale: localePrefix },      });    }  },  component: Outlet,});
      ここで、{-$locale}は現在のロケールに置き換えられる動的なルートパラメータです。この記法によりスロットがオプションになり、'prefix-no-default'などのルーティングモードで動作できるようになります。

      同じルートで複数の動的セグメントを使用する場合（例：/{-$locale}/other-path/$anotherDynamicPath/...）、このスロットが問題を引き起こす可能性があることに注意してください。 'prefix-all'モードの場合、スロットを$localeに切り替えることをお勧めします。 'no-prefix'または'search-params'モードの場合、スロットを完全に削除できます。

    7. コンテンツの宣言

      翻訳を保存するためのコンテンツ宣言を作成および管理します：

      src/contents/page.content.ts
      import type { Dictionary } from "intlayer";import { t } from "intlayer";const appContent = {  content: {    links: {      about: t({        en: "About",        es: "Acerca de",        fr: "À propos",        ja: "アバウト",      }),      home: t({        en: "Home",        es: "Inicio",        fr: "Accueil",        ja: "ホーム",      }),    },    meta: {      title: t({        en: "Welcome to Intlayer + TanStack Router",        es: "Bienvenido a Intlayer + TanStack Router",        fr: "Bienvenue à Intlayer + TanStack Router",        ja: "Intlayer + TanStack Router へようこそ",      }),      description: t({        en: "This is an example of using Intlayer with TanStack Router",        es: "Este es un ejemplo de uso de Intlayer con TanStack Router",        fr: "Ceci est un exemple d'utilisation d'Intlayer avec TanStack Router",        ja: "これは Intlayer と TanStack Router を使用した例です",      }),    },  },  key: "app",} satisfies Dictionary;export default appContent;
      コンテンツ宣言は、contentDirディレクトリ（デフォルトでは./app）に含まれている限り、アプリケーションのどこでも定義できます。また、コンテンツ宣言ファイルの拡張子（デフォルトでは.content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}）と一致する必要があります。
      詳細については、コンテンツ宣言ドキュメントを参照してください。

    8. ロケール対応コンポーネントとフックの作成

      ロケール対応のナビゲーションのための LocalizedLink コンポーネントを作成します：

      src/components/localized-link.tsx
      import type { FC } from "react";import { Link, type LinkComponentProps } from "@tanstack/react-router";import { useLocale } from "react-intlayer";import { getPrefix } from "intlayer";export const LOCALE_ROUTE = "{-$locale}" as const;export type To = StripLocalePrefix<LinkComponentProps["to"]>;export type StripLocalePrefix<T extends string | undefined> = T extends  | `/${typeof LOCALE_ROUTE}/`  | `/${typeof LOCALE_ROUTE}`  ? "/"  : T extends `/${typeof LOCALE_ROUTE}/${infer Rest}`    ? `/${Rest}`    : T;type LocalizedLinkProps = {  to?: To;} & Omit<LinkComponentProps, "to">;export const LocalizedLink: FC<LocalizedLinkProps> = (props) => {  const { locale } = useLocale();  const { localePrefix } = getPrefix(locale);  return (    <Link      {...props}      params={{        locale: localePrefix,        ...(typeof props?.params === "object" ? props?.params : {}),      }}      to={`/${LOCALE_ROUTE}${props.to}` as LinkComponentProps["to"]}    />  );};

      このコンポーネントには2つの目的があります：

      • URLから不要な{-$locale}接頭辞を削除します。
      • ロケールパラメータをURLに挿入して、ユーザーがローカライズされたルートに直接リダイレクトされるようにします。

      次に、プログラムによるナビゲーションのための useLocalizedNavigate フックを作成できます：

      src/hooks/useLocalizedNavigate.tsx
      import { useNavigate } from "@tanstack/react-router";import { getPrefix } from "intlayer";import { useLocale } from "react-intlayer";import type { StripLocalePrefix } from "@/components/localized-link";import type { FileRouteTypes } from "@/routeTree.gen";type NavigateFn = ReturnType<typeof useNavigate>;type BaseNavigateOptions = Parameters<NavigateFn>[0];type LocalizedTo = StripLocalePrefix<FileRouteTypes["to"]>;export type LocalizedNavigateOptions = Omit<  BaseNavigateOptions,  "to" | "params"> & {  to: LocalizedTo;  params?: Omit<NonNullable<BaseNavigateOptions["params"]>, "locale">;};type LocalizedNavigate = (  options: LocalizedNavigateOptions) => ReturnType<NavigateFn>;export const useLocalizedNavigate = () => {  const navigate = useNavigate();  const { locale } = useLocale();  const localizedNavigate: LocalizedNavigate = (args: any) => {    const { localePrefix } = getPrefix(locale);    if (typeof args === "string") {      return navigate({        to: `/${LOCALE_ROUTE}${args}`,        params: { locale: localePrefix },      });    }    const { to, ...rest } = args;    const localizedTo = `/${LOCALE_ROUTE}${to}` as any;    return navigate({      to: localizedTo,      params: { locale: localePrefix, ...rest } as any,    });  };  return localizedNavigate;};

    9. ページでのIntlayerの利用

      アプリケーション全体でコンテンツ辞書にアクセスします：

      ローカライズされたホームページ

      src/routes/{-$locale}/index.tsx
      import { createFileRoute } from "@tanstack/react-router";import {  getIntlayer,  defaultLocale,  localeMap,  getLocalizedUrl,} from "intlayer";import { useIntlayer } from "react-intlayer";import LocaleSwitcher from "@/components/locale-switcher";import { LocalizedLink } from "@/components/localized-link";import { useLocalizedNavigate } from "@/hooks/useLocalizedNavigate";export const Route = createFileRoute("/{-$locale}/")({  component: RouteComponent,  head: ({ params }) => {    const { locale } = params;    const path = "/"; // このルートのパス    const metaContent = getIntlayer("app", locale);    return {      links: [        // カノニカルリンク：現在のローカライズされたページを指します        { rel: "canonical", href: getLocalizedUrl(path, locale) },        // Hreflang：すべてのローカライズされたバージョンについてGoogleに伝えます        ...localeMap(({ locale: mapLocale }) => ({          rel: "alternate",          hrefLang: mapLocale,          href: getLocalizedUrl(path, mapLocale),        })),        // x-default：一致する言語がないユーザー向け        // デフォルトのフォールバックロケールを定義します（通常は主要言語）        {          rel: "alternate",          hrefLang: "x-default",          href: getLocalizedUrl(path, defaultLocale),        },      ],      meta: [        { title: metaContent.title },        { name: "description", content: metaContent.meta.description },      ],    };  },});function RouteComponent() {  const content = useIntlayer("app");  const navigate = useLocalizedNavigate();  return (    <div>      <div>        {content.title}        <LocaleSwitcher />        <div>          <LocalizedLink to="/">{content.links.home}</LocalizedLink>          <LocalizedLink to="/about">{content.links.about}</LocalizedLink>        </div>        <div>          <button onClick={() => navigate({ to: "/" })}>            {content.links.home}          </button>          <button onClick={() => navigate({ to: "/about" })}>            {content.links.about}          </button>        </div>      </div>    </div>  );}
      useIntlayerフックの詳細については、ドキュメントを参照してください。

    10. ロケールスイッチャーコンポーネントの作成

      ユーザーが言語を変更できるようにするコンポーネントを作成します：

      src/components/locale-switcher.tsx
      import { useLocation } from "@tanstack/react-router";import {  getHTMLTextDir,  getLocaleName,  getPathWithoutLocale,  getPrefix,  Locales,} from "intlayer";import type { FC } from "react";import { useLocale } from "react-intlayer";import { LocalizedLink, type To } from "./localized-link";export const LocaleSwitcher: FC = () => {  const { pathname } = useLocation();  const { availableLocales, locale, setLocale } = useLocale();  const pathWithoutLocale = getPathWithoutLocale(pathname);  return (    <ol>      {availableLocales.map((localeEl) => (        <li key={localeEl}>          <LocalizedLink            aria-current={localeEl === locale ? "page" : undefined}            onClick={() => setLocale(localeEl)}            params={{ locale: getPrefix(localeEl).localePrefix }}            to={pathWithoutLocale as To}          >            <span>              {/* ロケール - 例: FR */}              {localeEl}            </span>            <span>              {/* そのロケール自体での言語名 - 例: Français */}              {getLocaleName(localeEl, locale)}            </span>            <span dir={getHTMLTextDir(localeEl)} lang={localeEl}>              {/* 現在のロケールでの言語名 - 例: Locales.SPANISH の場合 Francés */}              {getLocaleName(localeEl)}            </span>            <span dir="ltr" lang={Locales.ENGLISH}>              {/* 英語での言語名 - 例: French */}              {getLocaleName(localeEl, Locales.ENGLISH)}            </span>          </LocalizedLink>        </li>      ))}    </ol>  );};
      useLocaleフックの詳細については、ドキュメントを参照してください。

    11. HTML属性の管理

      ステップ 5 で見たように、ルートコンポーネントで useParams を使用して html タグの lang および dir 属性を管理できます。これにより、サーバーとクライアントで正しい属性が設定されるようになります。

      src/routes/__root.tsx
      function RootDocument({ children }: { children: ReactNode }) {  const params = LocaleRoute.useParams();  const locale = params?.locale ?? defaultLocale;  return (    <html dir={getHTMLTextDir(locale)} lang={locale}>      {/* ... */}    </html>  );}

    12. ミドルウェアの追加

      intlayerProxyを使用して、アプリケーションにサーバーサイドのルーティングを追加することもできます。このプラグインは、URLに基づいて現在のロケールを自動的に検出し、適切なロケールクッキーを設定します。ロケールが指定されていない場合、ユーザーのブラウザの言語設定に基づいて最も適切なロケールを決定します。ロケールが検出されない場合は、デフォルトのロケールにリダイレクトされます。

      intlayerProxyを本番環境で使用するには、vite-intlayerパッケージをdevDependenciesからdependenciesに切り替える必要があることに注意してください。
      vite.config.ts
      import { tanstackStart } from "@tanstack/react-start/plugin/vite";import viteReact from "@vitejs/plugin-react";import { nitro } from "nitro/vite";import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";export default defineConfig({  plugins: [    intlayerProxy(), // Nitroを使用する場合、プロキシをサーバーの前に配置する必要があります    nitro(),    intlayer(),    tanstackStart({      router: {        routeFileIgnorePattern:          ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$",      },    }),    viteReact(),  ],});

    13. メタデータの国際化

      getIntlayerフックを使用して、アプリケーション全体でコンテンツ辞書にアクセスすることもできます：

      src/routes/{-$locale}/index.tsx
      import { createFileRoute } from "@tanstack/react-router";import { getIntlayer } from "intlayer";export const Route = createFileRoute("/{-$locale}/")({  component: RouteComponent,  head: ({ params }) => {    const { locale } = params;    const path = "/"; // The path for this route    const metaContent = getIntlayer("app", locale);    return {      links: [        // Canonical link: Points to the current localized page        { rel: "canonical", href: getLocalizedUrl(path, locale) },        // Hreflang: Tell Google about all localized versions        ...localeMap(({ locale: mapLocale }) => ({          rel: "alternate",          hrefLang: mapLocale,          href: getLocalizedUrl(path, mapLocale),        })),        // x-default: For users in unmatched languages        // Define the default fallback locale (usually your primary language)        {          rel: "alternate",          hrefLang: "x-default",          href: getLocalizedUrl(path, defaultLocale),        },      ],      meta: [        { title: metaContent.title },        { name: "description", content: metaContent.meta.description },      ],    };  },});

    14. サーバーアクションでのロケールの取得

      サーバーアクションやAPIエンドポイント内から現在のロケールにアクセスしたい場合があります。 Intlayerの getLocale ヘルパーを使用してこれを行うことができます。

      以下は、TanStack Startのサーバー関数を使用した例です：

      src/routes/{-$locale}/index.tsx
      import { createServerFn } from "@tanstack/react-start";import {  getRequestHeader,  getRequestHeaders,} from "@tanstack/react-start/server";import { getCookie, getIntlayer, getLocale } from "intlayer";export const getLocaleServer = createServerFn().handler(async () => {  const locale = await getLocale({    // リクエストからクッキーを取得する（デフォルト：'INTLAYER_LOCALE'）    getCookie: (name) => {      const cookieString = getRequestHeader("cookie");      return getCookie(name, cookieString);    },    // リクエストからヘッダーを取得する（デフォルト：'x-intlayer-locale'）    // Accept-Languageネゴシエーションを使用したフォールバック    getHeader: (name) => getRequestHeader(name),  });  // getIntlayer()を使用してコンテンツを取得する  const content = getIntlayer("app", locale);  return { locale, content };});

    15. 「見つかりませんでした」ページの管理

      ユーザーが存在しないページにアクセスしたときにカスタムの404ページを表示できます。ロケール接頭辞は、404ページがトリガーされる方法に影響を与える可能性があります。

      ロケール接頭辞を使用したTanStack Routerの404処理の理解

      TanStack Routerでは、ローカライズされたルートでの404ページの処理には多層的なアプローチが必要です：

      1. 専用の404ルート: 404 UIを表示するための特定のルート
      2. ルートレベルの検証: ロケール接頭辞を検証し、無効なものを404にリダイレクトします
      3. キャッチオールルート: ロケールセグメント内の一致しないパスをすべてキャプチャします
      src/routes/{-$locale}/404.tsx
      import { createFileRoute } from "@tanstack/react-router";// これにより、専用の /[locale]/404 ルートが作成されます// これは直接のルートとしても使用され、他のファイルでコンポーネントとしてインポートもされますexport const Route = createFileRoute("/{-$locale}/404")({  component: NotFoundComponent,});// コンポーネントおよびキャッチオールルートで再利用できるように個別にエクスポートされますexport function NotFoundComponent() {  return (    <div>      <h1>404</h1>    </div>  );}
      src/routes/{-$locale}/route.tsx
      import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";import { validatePrefix } from "intlayer";import { NotFoundComponent } from "./404";export const Route = createFileRoute("/{-$locale}")({  // beforeLoadは、ルートがレンダリングされる前（サーバーとクライアントの両方）に実行されます  // ロケール接頭辞を検証するのに最適な場所です  beforeLoad: ({ params }) => {    const localeParam = params.locale;    // validatePrefixは、intlayer構成に従ってロケールが有効かどうかを確認します    const { isValid, localePrefix } = validatePrefix(localeParam);    if (!isValid) {      // 無効なロケール接頭辞 - 有効なロケール接頭辞を持つ404ページにリダイレクトします      throw redirect({        to: "/{-$locale}/404",        params: { locale: localePrefix },      });    }  },  component: Outlet,  // notFoundComponentは、子ルートが存在しないときに呼び出されます  // 例：/en/non-existent-page は /en レイアウト内でこれをトリガーします  notFoundComponent: NotFoundComponent,});
      src/routes/{-$locale}/$.tsx
      import { createFileRoute } from "@tanstack/react-router";import { NotFoundComponent } from "./404";// $（スプラット/キャッチオール）ルートは、他のルートと一致しないパスに一致します// 例：/en/some/deeply/nested/invalid/path// これにより、ロケール内の一致しないパスがすべて404ページを表示するようになります// これがないと、一致しない深いパスが空白ページまたはエラーを表示する可能性がありますexport const Route = createFileRoute("/{-$locale}/$")({  component: NotFoundComponent,});

    16. コンポーネントのコンテンツを抽出する

      オプション

      既存のコードベースがある場合、数千のファイルを変換するのは時間がかかることがあります。

      このプロセスを容易にするために、Intlayerは、コンポーネントを変換しコンテンツを抽出するための コンパイラ / エクストラクタ を提案しています。

      セットアップするには、intlayer.config.ts ファイルに compiler セクションを追加します。

      intlayer.config.ts
      import { type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  // ... 他の構成  compiler: {    /**     * コンパイラを有効にするかどうかを指定します。     */    enabled: true,    /**     * 出力ファイルのパスを定義します。     */    output: ({ fileName, extension }) => `./${fileName}${extension}`,    /**     * 変換後にコンポーネントを保存するかどうかを指定します。     *     * - `true` の場合、コンパイラはディスク上のコンポーネントファイルを書き換えます。変換は永続的になり、次回のプロセスではスキップされます。これにより、アプリの変換後にコンパイラを削除できます。     *     * - `false` の場合、コンパイラはビルド出力のコードにのみ `useIntlayer()` 関数呼び出しを注入し、元のコードベースはそのまま維持します。変換はメモリ内でのみ行われます。     */    saveComponents: false,    /**     * 辞書キーの接頭辞     */    dictionaryKeyPrefix: "",  },};export default config;

      コンポーネントを変換してコンテンツを抽出するためにエクストラクタを実行します

      bash
      npx intlayer extract

    17. サイトマップの生成

      Intlayer には、アプリケーションのサイトマップを簡単に作成できるサイトマップ ジェネレーターが組み込まれています。ローカライズされたルートを処理し、検索エンジンに必要なメタデータを追加します。

      Intlayer によって生成されたサイトマップは、xhtml:link 名前空間 (Hreflang XML Extensions) をサポートしています。生の URL のみを表示するデフォルトのサイトマップ ジェネレーターとは異なり、Intlayer はページのすべての言語バージョン (例: /about、/about?lang=fr、/about?lang=es) 間に必要な双方向リンクを自動的に作成します。これにより、検索エンジンが正しい言語バージョンを正しい対象者に正しくインデックス付けして提供できるようになります。

      これを使用するには、まず vite.config.ts を構成して、ローカライズされたルートのプリレンダリングを有効にし、デフォルトの TanStack Start サイトマップ生成を無効にする必要があります。

      vite.config.ts
      import { localeFlatMap } from "intlayer";// ... その他のインポートexport const pathList = ["", "/about", "/404"];const localizedPages = localeFlatMap(({ urlPrefix }) =>  pathList.map((path) => ({    path: `${urlPrefix}${path}`,    prerender: {      enabled: true,    },  })));export default defineConfig({  plugins: [    // ... その他のプラグイン    tanstackStart({      // ... その他の設定      sitemap: {        enabled: false,      },      prerender: {        enabled: true,        crawlLinks: false,        concurrency: 10,      },      pages: localizedPages,    }),  ],});

      次に、generateSitemap 関数を使用する src/routes/sitemap[.]xml.ts ルートを作成します。

      src/routes/sitemap[.]xml.ts
      import { createFileRoute } from "@tanstack/react-router";import { generateSitemap } from "intlayer";const SITE_URL = (  import.meta.env.VITE_SITE_URL ?? "http://localhost:3000").replace(/\/$/, "");export const Route = createFileRoute("/sitemap.xml")({  server: {    handlers: {      GET: async () => {        const sitemap = generateSitemap(          [            { path: "/", changefreq: "daily", priority: 1.0 },            { path: "/about", changefreq: "monthly", priority: 0.8 },          ],          { siteUrl: SITE_URL }        );        return new Response(sitemap, {          headers: { "Content-Type": "application/xml" },        });      },    },  },});

    18. TypeScriptの構成

      Intlayerはモジュール拡張機能を利用して、TypeScriptの利点を活用し、コードベースを強化します。

      TypeScriptの構成に自動生成された型が含まれていることを確認してください：

      tsconfig.json
      {  // ... 既存の構成  include: [    // ... 既存の包含    ".intlayer/**/*.ts", // 自動生成された型を含める  ],}

    Git構成

    Intlayerによって生成されたファイルは無視することをお勧めします。これにより、Gitリポジトリにそれらをコミットすることを避けることができます。

    これを行うには、.gitignoreファイルに以下の指示を追加できます：

    .gitignore
    # Intlayerによって生成されたファイルを無視する.intlayer

    VS Code拡張機能

    Intlayerでの開発体験を向上させるために、公式のIntlayer VS Code拡張機能をインストールできます。

    VS Code Marketplaceからインストール

    この拡張機能は以下を提供します：

    • 翻訳キーのオートコンプリート。
    • 翻訳の欠落に対するリアルタイムのエラー検出。
    • 翻訳されたコンテンツのインラインプレビュー。
    • 翻訳を簡単に作成および更新するためのクイックアクション。

    拡張機能の使用方法の詳細については、Intlayer VS Code拡張機能のドキュメントを参照してください。

    さらに進む

    さらに進むには、ビジュアルエディターを実装したり、CMSを使用してコンテンツを外部化したりできます。

    ドキュメント参照

    コンパイラTanstack Start Solid