gt-tanstack-start@0.1.0

2026年2月16日

Ernest McCarter

gt-tanstack-startv0.1.0tanstack-starttanstacki18ntranslationvite

概要

gt-tanstack-start は、TanStack Start 向けの i18n サポートを提供するための最初の試みです。

このライブラリは実験的なものです。 まだ開発初期段階にあり、フィードバックを広く受け付けています。TanStack を本番環境で利用する際に翻訳が必要な場合は、当面は gt-react を使用することを推奨します。

含まれているもの

initializeGT() — TanStack Start 用の i18n マネージャーを設定します。ルートのルートファイルの先頭で一度だけ呼び出します。
GTProvider — アプリを翻訳用コンテキストでラップし、TanStack Start 向けに最適化された SSR 検出とロケール解決処理を備えています。
getTranslations() — ルートローダー内で呼び出し、翻訳をプロバイダーに渡すために設計された非同期関数です。
getLocale() — 現在のリクエストに対して解決されたロケールを返します。
<T>, <Var>, <LocaleSelector> — すべてを単一のパッケージからインポートできるように、gt-react から再エクスポートされています。

クイックスタート

インストール

npm install gt-tanstack-start

`gt.config.json` を設定する

{
  "defaultLocale": "en",
  "locales": ["fr", "zh"],
  "files": {
    "gt": {
      "output": "src/_gt/[locale].json"
    }
  }
}

環境変数を設定

VITE_GT_PROJECT_ID=your-project-id
VITE_GT_DEV_API_KEY=your-dev-api-key

翻訳ローダーの作成

// loadTranslations.ts
export async function loadTranslations(locale: string) {
  const translations = await import(`./src/_gt/${locale}.json`);
  return translations.default;
}

ルートパスを設定する

// __root.tsx
import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router';
import {
  initializeGT,
  GTProvider,
  getTranslations,
  getLocale,
} from 'gt-tanstack-start';
import gtConfig from '../../gt.config.json';
import { loadTranslations } from '../../loadTranslations';

initializeGT({
  ...gtConfig,
  projectId: import.meta.env.VITE_GT_PROJECT_ID,
  devApiKey: import.meta.env.VITE_GT_DEV_API_KEY,
  loadTranslations,
});

export const Route = createRootRoute({
  loader: async () => ({
    translations: await getTranslations(),
    locale: getLocale(),
  }),
  shellComponent: RootDocument,
});

function RootDocument({ children }: { children: React.ReactNode }) {
  const { translations, locale } = Route.useLoaderData();
  return (
    <html lang={locale}>
      <head>
        <HeadContent />
      </head>
      <body>
        <GTProvider translations={translations}>
          {children}
        </GTProvider>
        <Scripts />
      </body>
    </html>
  );
}

コンテンツの翻訳

import { T } from 'gt-tanstack-start';

export default function Page() {
  return (
    <T>
      <p>これは自動的に翻訳されます。</p>
    </T>
  );
}

今後の展望

これは v0.1.0 です。土台はできていますが、これからまだ多くの機能を追加していく予定です。 SSG やロケールルーティングは、今後のリリースで追加を予定している機能の一部です。

もし試してみたい方は、ぜひフィードバックをお寄せください。 Discord に参加いただくか、GitHub で issue を作成してください。

戻る

gt-tanstack-start@0.1.0

2026年2月16日

Ernest McCarter

gt-tanstack-startv0.1.0tanstack-starttanstacki18ntranslationvite

概要

gt-tanstack-start は、TanStack Start 向けの i18n サポートを提供するための最初の試みです。

このライブラリは実験的なものです。 まだ開発初期段階にあり、フィードバックを広く受け付けています。TanStack を本番環境で利用する際に翻訳が必要な場合は、当面は gt-react を使用することを推奨します。

含まれているもの

initializeGT() — TanStack Start 用の i18n マネージャーを設定します。ルートのルートファイルの先頭で一度だけ呼び出します。
GTProvider — アプリを翻訳用コンテキストでラップし、TanStack Start 向けに最適化された SSR 検出とロケール解決処理を備えています。
getTranslations() — ルートローダー内で呼び出し、翻訳をプロバイダーに渡すために設計された非同期関数です。
getLocale() — 現在のリクエストに対して解決されたロケールを返します。
<T>, <Var>, <LocaleSelector> — すべてを単一のパッケージからインポートできるように、gt-react から再エクスポートされています。

クイックスタート

インストール

npm install gt-tanstack-start

`gt.config.json` を設定する

{
  "defaultLocale": "en",
  "locales": ["fr", "zh"],
  "files": {
    "gt": {
      "output": "src/_gt/[locale].json"
    }
  }
}

環境変数を設定

VITE_GT_PROJECT_ID=your-project-id
VITE_GT_DEV_API_KEY=your-dev-api-key

翻訳ローダーの作成

// loadTranslations.ts
export async function loadTranslations(locale: string) {
  const translations = await import(`./src/_gt/${locale}.json`);
  return translations.default;
}

ルートパスを設定する

// __root.tsx
import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router';
import {
  initializeGT,
  GTProvider,
  getTranslations,
  getLocale,
} from 'gt-tanstack-start';
import gtConfig from '../../gt.config.json';
import { loadTranslations } from '../../loadTranslations';

initializeGT({
  ...gtConfig,
  projectId: import.meta.env.VITE_GT_PROJECT_ID,
  devApiKey: import.meta.env.VITE_GT_DEV_API_KEY,
  loadTranslations,
});

export const Route = createRootRoute({
  loader: async () => ({
    translations: await getTranslations(),
    locale: getLocale(),
  }),
  shellComponent: RootDocument,
});

function RootDocument({ children }: { children: React.ReactNode }) {
  const { translations, locale } = Route.useLoaderData();
  return (
    <html lang={locale}>
      <head>
        <HeadContent />
      </head>
      <body>
        <GTProvider translations={translations}>
          {children}
        </GTProvider>
        <Scripts />
      </body>
    </html>
  );
}

コンテンツの翻訳

import { T } from 'gt-tanstack-start';

export default function Page() {
  return (
    <T>
      <p>これは自動的に翻訳されます。</p>
    </T>
  );
}

今後の展望

もし試してみたい方は、ぜひフィードバックをお寄せください。 Discord に参加いただくか、GitHub で issue を作成してください。

戻る

gt-tanstack-start@0.1.0

2026年2月16日

Ernest McCarter

gt-tanstack-startv0.1.0tanstack-starttanstacki18ntranslationvite

概要

gt-tanstack-start は、TanStack Start 向けの i18n サポートを提供するための最初の試みです。

このライブラリは実験的なものです。 まだ開発初期段階にあり、フィードバックを広く受け付けています。TanStack を本番環境で利用する際に翻訳が必要な場合は、当面は gt-react を使用することを推奨します。

含まれているもの

initializeGT() — TanStack Start 用の i18n マネージャーを設定します。ルートのルートファイルの先頭で一度だけ呼び出します。
GTProvider — アプリを翻訳用コンテキストでラップし、TanStack Start 向けに最適化された SSR 検出とロケール解決処理を備えています。
getTranslations() — ルートローダー内で呼び出し、翻訳をプロバイダーに渡すために設計された非同期関数です。
getLocale() — 現在のリクエストに対して解決されたロケールを返します。
<T>, <Var>, <LocaleSelector> — すべてを単一のパッケージからインポートできるように、gt-react から再エクスポートされています。

クイックスタート

インストール

npm install gt-tanstack-start

`gt.config.json` を設定する

{
  "defaultLocale": "en",
  "locales": ["fr", "zh"],
  "files": {
    "gt": {
      "output": "src/_gt/[locale].json"
    }
  }
}

環境変数を設定

VITE_GT_PROJECT_ID=your-project-id
VITE_GT_DEV_API_KEY=your-dev-api-key

翻訳ローダーの作成

// loadTranslations.ts
export async function loadTranslations(locale: string) {
  const translations = await import(`./src/_gt/${locale}.json`);
  return translations.default;
}

ルートパスを設定する

// __root.tsx
import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router';
import {
  initializeGT,
  GTProvider,
  getTranslations,
  getLocale,
} from 'gt-tanstack-start';
import gtConfig from '../../gt.config.json';
import { loadTranslations } from '../../loadTranslations';

initializeGT({
  ...gtConfig,
  projectId: import.meta.env.VITE_GT_PROJECT_ID,
  devApiKey: import.meta.env.VITE_GT_DEV_API_KEY,
  loadTranslations,
});

export const Route = createRootRoute({
  loader: async () => ({
    translations: await getTranslations(),
    locale: getLocale(),
  }),
  shellComponent: RootDocument,
});

function RootDocument({ children }: { children: React.ReactNode }) {
  const { translations, locale } = Route.useLoaderData();
  return (
    <html lang={locale}>
      <head>
        <HeadContent />
      </head>
      <body>
        <GTProvider translations={translations}>
          {children}
        </GTProvider>
        <Scripts />
      </body>
    </html>
  );
}

コンテンツの翻訳

import { T } from 'gt-tanstack-start';

export default function Page() {
  return (
    <T>
      <p>これは自動的に翻訳されます。</p>
    </T>
  );
}

今後の展望

もし試してみたい方は、ぜひフィードバックをお寄せください。 Discord に参加いただくか、GitHub で issue を作成してください。

戻る

gt-tanstack-start@0.1.0

2026年2月16日

Ernest McCarter

gt-tanstack-startv0.1.0tanstack-starttanstacki18ntranslationvite

概要

gt-tanstack-start は、TanStack Start 向けの i18n サポートを提供するための最初の試みです。

このライブラリは実験的なものです。 まだ開発初期段階にあり、フィードバックを広く受け付けています。TanStack を本番環境で利用する際に翻訳が必要な場合は、当面は gt-react を使用することを推奨します。

含まれているもの

initializeGT() — TanStack Start 用の i18n マネージャーを設定します。ルートのルートファイルの先頭で一度だけ呼び出します。
GTProvider — アプリを翻訳用コンテキストでラップし、TanStack Start 向けに最適化された SSR 検出とロケール解決処理を備えています。
getTranslations() — ルートローダー内で呼び出し、翻訳をプロバイダーに渡すために設計された非同期関数です。
getLocale() — 現在のリクエストに対して解決されたロケールを返します。
<T>, <Var>, <LocaleSelector> — すべてを単一のパッケージからインポートできるように、gt-react から再エクスポートされています。

クイックスタート

インストール

npm install gt-tanstack-start

`gt.config.json` を設定する

{
  "defaultLocale": "en",
  "locales": ["fr", "zh"],
  "files": {
    "gt": {
      "output": "src/_gt/[locale].json"
    }
  }
}

環境変数を設定

VITE_GT_PROJECT_ID=your-project-id
VITE_GT_DEV_API_KEY=your-dev-api-key

翻訳ローダーの作成

// loadTranslations.ts
export async function loadTranslations(locale: string) {
  const translations = await import(`./src/_gt/${locale}.json`);
  return translations.default;
}

ルートパスを設定する

// __root.tsx
import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router';
import {
  initializeGT,
  GTProvider,
  getTranslations,
  getLocale,
} from 'gt-tanstack-start';
import gtConfig from '../../gt.config.json';
import { loadTranslations } from '../../loadTranslations';

initializeGT({
  ...gtConfig,
  projectId: import.meta.env.VITE_GT_PROJECT_ID,
  devApiKey: import.meta.env.VITE_GT_DEV_API_KEY,
  loadTranslations,
});

export const Route = createRootRoute({
  loader: async () => ({
    translations: await getTranslations(),
    locale: getLocale(),
  }),
  shellComponent: RootDocument,
});

function RootDocument({ children }: { children: React.ReactNode }) {
  const { translations, locale } = Route.useLoaderData();
  return (
    <html lang={locale}>
      <head>
        <HeadContent />
      </head>
      <body>
        <GTProvider translations={translations}>
          {children}
        </GTProvider>
        <Scripts />
      </body>
    </html>
  );
}

コンテンツの翻訳

import { T } from 'gt-tanstack-start';

export default function Page() {
  return (
    <T>
      <p>これは自動的に翻訳されます。</p>
    </T>
  );
}

今後の展望

もし試してみたい方は、ぜひフィードバックをお寄せください。 Discord に参加いただくか、GitHub で issue を作成してください。