# gt-react: General Translation React SDK: 本番環境と開発環境
URL: https://generaltranslation.com/ja/docs/react/concepts/environments.mdx
---
title: 本番環境と開発環境
description: 本番環境と開発環境の違い
---

{/* 自動生成: 直接編集せず、代わりに content/docs-templates/ 内のテンプレートを編集してください。 */}


## 概要

`gt-react` は、React アプリケーションの実行環境に応じて動作が異なります。

実行環境は、`NODE_ENV` 環境変数を確認して判別します。

## 本番環境での動作

### 環境変数

本番環境で使用できる環境変数は、`GT_PROJECT_ID` (または `NEXT_PUBLIC_GT_PROJECT_ID` などのプレフィックス付きの変数) のみです。

API キーを環境変数として指定すると、`gt-react` はエラーをスローします。これは、API キーがクライアント側に公開されるのを防ぐためです。

### 翻訳の読み込み動作

本番環境では、`gt-react` プロバイダーはデフォルトで General Translation CDN から翻訳を読み込みます。

`loadTranslations` 関数でローカル翻訳などのカスタムの翻訳読み込み動作を設定している場合、`gt-react` は代わりにそちらを使用します。

本番環境では、翻訳のホットリロードは無効になります。

## 開発時の動作

### 環境変数

開発環境はローカルで、外部ユーザーに公開されないため、`gt-react` は `NEXT_PUBLIC_` や `VITE_` (または同様のプレフィックス) が付いた General Translation の環境変数も受け付けます。

### 翻訳の読み込み動作

開発環境では、`gt-react` プロバイダーはまず本番環境と同じ方法で翻訳の読み込みを試みます。
これらの翻訳はメモリに読み込まれます。

デフォルト以外の言語で (`useGT`、`<T>`、または `useTranslations` を使用する) コンポーネントをレンダリングする場合、`gt-react` プロバイダーは次のように動作します。

1. 指定されたコンテンツに対して有効な保存済み翻訳が見つかった場合、その翻訳をレンダリングします。
2. 翻訳が見つからない場合は、General Translation API を介してコンテンツを動的に翻訳しようとします。
3. 翻訳後は、その翻訳をレンダリングし、今後の利用に備えてメモリに保存します。
4. 翻訳がタイムアウトした場合は、元のコンテンツにフォールバックしてレンダリングします。

<Callout type="info">
  API は開発用の翻訳も内部で短時間キャッシュするため、同じ翻訳が再度リクエストされた場合はキャッシュから返されます。

  これらの翻訳はプロジェクト単位で分離されているため、他のプロジェクトの翻訳と混在することはありません。
  また、このキャッシュは開発セッションごとに固有であるため、キャッシュされた翻訳が本番環境で使われることはありません。
</Callout>

`gt-react` は、`useGT`、`<T>`、または `useTranslations` を使用するコンポーネントの変更を検出し、変更されたコンテンツを API 経由で動的に翻訳します。

## 本番用 API キーと開発用 API キー [#api-keys]

`gt-react` の本番時と開発時の動作を区別しやすくするため、「本番用 API キー」と「開発用 API キー」という概念があります。

### 本番用 API キー

本番用 API キーとは、`gtx-api-` で始まる API キーです。

本番用 API キーを指定すると、`gt-react` は [本番環境での動作](#production-behavior) セクションで説明しているとおりに動作します。

つまり、React アプリケーションを開発モードで実行していても、本番用 API キーを指定すると、`gt-react` は本番環境で実行されているかのように動作します。
翻訳のホットリロードは無効になり、翻訳が存在しないコンポーネントは元の内容をレンダリングします。

この動作以外で、`gt-react` が本番用 API キーを利用することはありません。

<Callout type="info">
  本番環境にデプロイする際に、別途本番用 API キーの作成をお願いしているのは、CLI ツールが本番用 API キーにしかアクセスしないためです。

  CLI ツールは、課金とレート制限を「production」カテゴリとして適用します。
</Callout>

### 開発用 API キー

開発用 API キーは、`gtx-dev-` で始まる API キーです。

開発用 API キーを指定した場合、`gt-react` は [開発時の動作](#development-behavior) セクションで説明されているとおりに動作します。

開発用 API キーを使用する場合、課金とレート制限は「development」カテゴリで適用されます。

<Callout type="warn">
  開発用 API キーで作成された翻訳は保存されず、本番環境では使用できません。

  開発用の翻訳は、本番環境にリリースする前にアプリケーションをテストできるようにすることを目的としています。
</Callout>