# tanstack-start: 概要 URL: https://generaltranslation.com/ja/docs/tanstack-start/introduction.mdx --- title: 概要 description: General Translation の TanStack Start SDK の概要 --- ## はじめに `gt-tanstack-start` は、[TanStack Start](https://tanstack.com/start) アプリケーション向けのオープンソースの国際化 (i18n) 連携です。 [`gt-next`](/docs/next) と同じ開発者体験を TanStack Start フレームワークでも実現します。つまり、コンテンツを `` で囲むだけで翻訳できます。[`gt-react`](/docs/react) をベースにしており、アイソモーフィックなロケール検出や root loader 連携など、TanStack Start 固有の機能が追加されています。 **実験的:** `gt-tanstack-start` は現在も活発に開発されています。API はマイナーバージョン間で変更される可能性があります。現時点では、本番環境での使用は推奨されていません。 ## 仕組み root route で [`initializeGT()`](#initialization-with-initializegt) を使って初期化します [root loader](#root-loader) で訳文を読み込みますアプリを [``](#the-gtprovider-component) でラップします [``](#the-t-component) を使ってコンテンツを翻訳します ## `initializeGT` による初期化 `initializeGT()` 関数は i18n マネージャーを設定します。root route ファイルの先頭で呼び出してください。 ```tsx title="src/routes/__root.tsx" import { initializeGT } from 'gt-tanstack-start' import gtConfig from '../../gt.config.json' import loadTranslations from '../../loadTranslations' initializeGT({ ...gtConfig, loadTranslations, }) ``` ## Root loader 現在のリクエストに対応する適切な訳文を取得するには、root route の loader で `getTranslations()` と `getLocale()` を使用します: ```tsx title="src/routes/__root.tsx" import { getTranslations, getLocale } from 'gt-tanstack-start' export const Route = createRootRoute({ loader: async () => { return { translations: await getTranslations(), locale: getLocale(), } }, // ... }) ``` ## `` コンポーネント `` は、すべての子コンポーネントに翻訳コンテキストを提供します。loader から `translations` と `locale` を渡してください。 ```tsx title="src/routes/__root.tsx" import { GTProvider } from 'gt-tanstack-start' function RootDocument({ children }: { children: React.ReactNode }) { const { translations, locale } = Route.useLoaderData() return ( {children} ) } ``` ## `` コンポーネント [``](/docs/react/api/components/t) コンポーネントは JSX コンテンツを翻訳します。要素を囲むと、その内容がユーザーの言語でレンダリングされます: ```tsx import { T } from 'gt-react' function Welcome() { return (

Welcome to our app!

This content is automatically translated.

) } ``` `` は `gt-tanstack-start` ではなく `gt-react` からインポートしてください。これにより、翻訳ファイルの生成時に `gt` CLI が翻訳対象のコンテンツを検出できるようになります。 ## ロケールセレクターユーザーが言語を切り替えられるよう、`` を追加します。 ```tsx import { LocaleSelector } from 'gt-tanstack-start' function Nav() { return ( ) } ``` *** ## 次のステップ * [Quickstart ガイド](/docs/tanstack-start)でプロジェクトをセットアップする * [サンプルアプリ](https://github.com/generaltranslation/gt/tree/main/examples/tanstack-start-basic)を見る * ``、``、`` などの[変数コンポーネント](/docs/react/guides/variables)について学ぶ