# General Translation React SDKs (gt-react, gt-next): TanStack Start のセットアップ URL: https://generaltranslation.com/ja/docs/react/tanstack-start/setup.mdx --- title: TanStack Start のセットアップ description: TanStack Start アプリで General Translation を初期化し、ロケールを解決して、root route から provider をハイドレートします。 --- `gt-tanstack-start` のセットアップはすべて root route で行います。モジュールレベルで [`initializeGT`](/docs/node/reference/functions/initialize-gt) を呼び出し、`parseLocale` でリクエストのロケールを解決し、ルートの loader で翻訳スナップショットを読み込み、その両方を [``](/docs/react/reference/components/gt-provider) に渡します。TanStack Start はサーバーで render されるため、provider にはロケールと翻訳をあらかじめ渡しておく必要があります。そのため、この pattern では loader からそれらをハイドレートします。このページでは、TanStack Start 固有のセットアップについて説明します。インストールや CLI を含む一連の手順については、[TanStack Start Quickstart](/docs/react/tanstack-start-quickstart) を参照してください。 *警告: `gt-tanstack-start` は実験的機能であり、破壊的変更が加わる可能性があります。* ## 翻訳を読み込む [#load-translations] ロケールの翻訳ファイルをインポートする [`loadTranslations`](/docs/react/reference/functions/load-translations) 関数を作成します。Vite でインポートできるように、ファイルは `src/` 配下に置いてください。 ```ts title="loadTranslations.ts" export default async function loadTranslations(locale: string) { const translations = await import(`./src/_gt/${locale}.json`); return translations.default; } ``` `npx gt translate` を実行すると、CLI がこれらのファイルを生成します。 ## ロケールを初期化して解決する [#initialize] `initializeGT`、`parseLocale`、および [`getTranslationsSnapshot`](/docs/react/reference/functions/get-translations-snapshot) は、いずれも `gt-tanstack-start` からインポートします。 * **`initializeGT`** — root route のモジュールレベルで一度だけ呼び出します。`gt.config.json` をスプレッドし、`loadTranslations` を渡します。 * **`parseLocale`** — サーバーではリクエストのクッキーと `Accept-Language` ヘッダーからロケールを読み取り、ブラウザーではクッキーから読み取ります。解決したロケールはクッキーに保存されます。 * **`getTranslationsSnapshot`** — `` が想定する形式でロケールの翻訳を読み込むため、コンテンツが読み込み時にちらつかずにレンダリングされます。詳しくは [リファレンス](/docs/react/reference/functions/get-translations-snapshot) を参照してください。 ## root routeを設定する [#root-route] `src/routes/__root.tsx` で、モジュールレベルで初期化を行い、loader でロケールを解決してスナップショットを読み込んだら、`locale` と `translations` をシェルコンポーネント内の `` に渡します。 ```tsx title="src/routes/__root.tsx" import { HeadContent, Scripts, createRootRoute, } from '@tanstack/react-router'; import { initializeGT, GTProvider, parseLocale, getTranslationsSnapshot, LocaleSelector, } from 'gt-tanstack-start'; import gtConfig from '../../gt.config.json'; import loadTranslations from '../../loadTranslations'; // General Translation をモジュールレベルで一度だけ初期化する initializeGT({ ...gtConfig, loadTranslations }); export const Route = createRootRoute({ loader: async () => { const locale = parseLocale(); return { locale, translations: await getTranslationsSnapshot(locale), }; }, shellComponent: RootDocument, }); function RootDocument({ children }: { children: React.ReactNode }) { const { locale, translations } = Route.useLoaderData(); return ( {children} ); } ``` ここでは、`` に `locale` と `translations` の両方を指定する必要があります。Next.js ではサーバー側でそれらが解決され、React Native ではプロバイダー自身が読み込むため、それらとは異なります。 ## 翻訳対象のコンテンツとしてマークする [#content] ルートコンポーネントでは、JSX を [``](/docs/react/reference/components/t) で囲み、[`useGT`](/docs/react/reference/hooks/use-gt) を使って文字列を翻訳します。CLI がソースのスキャン時に検出できるよう、これらは `gt-react` からインポートしてください。 ```tsx title="src/routes/index.tsx" import { createFileRoute } from '@tanstack/react-router'; import { T, useGT } from 'gt-react'; export const Route = createFileRoute('/')({ component: Home }); function Home() { const gt = useGT(); return (

Welcome to my app

This content is translated automatically.

); } ```