移行

概要

このガイドでは、すでにi18nライブラリを使用しているプロジェクトをgt-nextに移行するための手順を説明します。

また、移行をできるだけスムーズに行うためのヒントや提案もご紹介します。

前提条件

現在他のi18nライブラリを使用しているプロジェクトがあること。
gt-nextライブラリの基本的な理解があること。

なぜ移行するのか？

プロジェクトをgt-nextに移行したい理由はたくさんあります。

その一部をご紹介します：

JSONファイルは不要に： もうJSONファイルで翻訳を管理する必要はありません。すべてのコンテンツがコードと一緒にインラインで管理でき、本来あるべき場所に収まります。
自動翻訳： CLIツールを使って、高品質で文脈に合った翻訳を自動生成できます。翻訳を待つ必要はもうありません。
開発環境での実験： 翻訳のホットリロード機能により、開発中に簡単に翻訳を試すことができます。

セットアップ

gt-nextとgtx-cli CLIツールをインストールします。

npm i gt-next
npm i --save-dev gtx-cli

yarn add gt-next
yarn add --dev gtx-cli

bun add gt-next
bun add --dev gtx-cli

pnpm add gt-next
pnpm add --save-dev gtx-cli

プロジェクトのルートにdefaultLocaleプロパティとlocales配列を含むgt.config.jsonファイルを作成します。

gt.config.json

{
  "defaultLocale": "en",
  "locales": ["en", "fr", "es"]
}

次に、アプリのルートレイアウトに<GTProvider>コンポーネントを追加します。

app/layout.tsx

import { GTProvider } from 'gt-next'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <GTProvider>
          {children}
        </GTProvider>
      </body>
    </html>
  )
}

次に、next.config.jsファイルにwithGTConfigを追加します。

next.config.ts

import withGTConfig from 'gt-next/config'
const nextConfig = {
  // Your next.config.ts options
}
export default withGTConfig(nextConfig, {
  // Your GT configuration
})

より詳細な手順については、クイックスタートガイドを参照してください。

この時点で、3つのオプションがあります：

プロジェクト全体をgt-nextに完全に移行し、古いi18nライブラリを削除する。
プロジェクトを完全に移行するが、古いi18nライブラリの辞書を引き続き使用する。
今のところ古いi18nライブラリを使い続け、プロジェクトの一部のみをgt-nextに移行する。

各オプションの詳細については、移行戦略セクションを参照してください。

移行戦略

オプション1: プロジェクト全体を完全に移行する

このオプションは最も分かりやすく、一度に最も多くのコード変更が必要になります。

プロジェクトのセットアップが完了したら、古いi18nライブラリのすべてのインスタンスを検索し、gt-nextに置き換える必要があります。

アプリがuseTranslationsなどのReactフックを使用している場合は、コードベース内のすべてのuseTranslationsインスタンスを検索し、useGTに置き換えます。

次に、すべての文字列キーを実際の文字列値に置き換える必要があります。

例えば、古いコードが次のようになっている場合：

dictionary.json

{
  "hello": {
    "description": "Hello, world!"
  }
}

export default function MyComponent() {
  const { t } = useTranslation()
  return <div>{t('hello.description')}</div>
}

次のように置き換える必要があります：

export default function MyComponent() {
  const t = useGT()
  return <div>{t('Hello, world!')}</div>
}
// または
export default function MyComponent() {
  return <T>Hello, world!</T>
}

古いi18nライブラリのすべてのインスタンスに対してこれを行います。

オプション2: プロジェクトを完全に移行するが、古いi18nライブラリの辞書を引き続き使用する

プロジェクトをgt-nextに移行したいが、古いi18nライブラリの辞書を引き続き使用し、新しいコンテンツにのみGTのインライン機能を使用したい場合を考えてみましょう。

この場合、オプション1と似たようなことができます：

useTranslationsフックなどの古いi18nライブラリのすべてのインスタンスを見つけて、gt-nextのuseTranslationsフックに置き換えます。

useTranslationsフックは他のi18nライブラリのuseTranslationsフックと非常に似た動作をし、同じ方法で使用できます。

import { useTranslation } from 'react-i18next'
export default function MyComponent() {
  const { t } = useTranslation()
  return <div>{t('hello.description')}</div>
}

import { useTranslations } from 'gt-next'
export default function MyComponent() {
  const t = useTranslations()
  return <div>{t('hello.description')}</div>
}