# General Translation React SDKs (gt-react, gt-next): サーバーコンポーネント URL: https://generaltranslation.com/ja/docs/react/nextjs/server-components.mdx --- title: サーバーコンポーネント description: General Translation を使って React Server Components のコンテンツを翻訳し、サーバーコンポーネントとクライアントコンポーネントで `gt-next` がどのように動作するかを理解します。 --- Next.js App Router では、`gt-next` は React Server Components (RSC) とクライアントコンポーネントの両方で動作します。どちらの場合も、同じ [``](/docs/react/reference/components/t) コンポーネントと翻訳 hooks を `gt-next` からインポートでき、ライブラリが実行環境に応じて適切な実装を選択します。非同期の App Router 関数は `gt-next/server` のエントリポイントにあり、Pages Router では使用できません。このページでは、翻訳がどこで実行されるのか、また各種類のコンポーネントでどの import が利用できるのかを説明します。個別のサーバー API ページについては、まず [`getGT`](/docs/react/nextjs/reference/functions/get-gt) を参照してください。 ## サーバーとクライアントのインポート [#imports] メインの `gt-next` エントリは、どこでインポートするかによって使用される実装が異なります。 * **同期サーバーコンポーネント**では、`` と [``](/docs/react/reference/components/gt-provider) は、サーバーで翻訳を読み込むサーバー向けの実装になります。[`useGT`](/docs/react/reference/hooks/use-gt)、[`useTranslations`](/docs/react/reference/hooks/use-translations)、[`useMessages`](/docs/react/reference/hooks/use-messages)、[`useLocale`](/docs/react/reference/hooks/use-locale) などのフックも、`'use client'` 境界なしで使用できます。 * **非同期サーバーコンポーネント**では、[`gt-next/server`](/docs/react/nextjs/reference/functions/get-gt) から、対応する非同期関数 (`getGT`、`getTranslations`、`getMessages`、`getLocale` など) を使用します。 * **クライアントコンポーネント** (`'use client'` を含むファイル) では、同じインポートが共有の `gt-react` 実装に解決されます。インポートパスは同じなので、実際にどちらが使われているかを意識することはほとんどありません。JSX を `` で囲めば、コンポーネントがサーバーでレンダリングされてもクライアントでレンダリングされても、インプレースで翻訳されます。 ```tsx title="app/page.tsx" import { T } from 'gt-next'; export default function Page() { return (

Welcome

This content is translated automatically.

); } ``` *注: [`getGT`](/docs/react/nextjs/reference/functions/get-gt)、[`getLocale`](/docs/react/nextjs/reference/functions/get-locale)、[`tx`](/docs/react/nextjs/reference/functions/tx) などのサーバー専用関数は、クライアントコンポーネントにはインポートできません。`'use client'` ファイルからこれらをインポートすると、エラーがスローされます。* ## Next.js のプロバイダー [#provider] Next.js App Router では、`` はサーバーコンポーネントです。これをルートレイアウトに配置すると、サーバーで翻訳を読み込み、クライアントコンポーネントに渡します。`locale` や `translations` の props を**渡す必要はありません**。これらはサーバー側でリクエストから解決されます。 ```tsx title="app/layout.tsx" import { GTProvider, useLocale } from 'gt-next'; export default function RootLayout({ children, }: { children: React.ReactNode; }) { const locale = useLocale(); return ( {children} ); } ``` Next.js Pages Router では扱いが異なります。ページの props 経由で `locale` と `translations` を `` に渡してください。詳しくは、[Next.js Pages Router クイックスタート](/docs/react/nextjs-pages-router-quickstart)を参照してください。 ## 文字列の翻訳 [#strings] プレースホルダー、`aria-label` の値、代替テキストなどの単体の文字列には、`` コンポーネントではなく翻訳関数が必要です。 * **同期コンポーネントでは**、`gt-next` の `useGT` フックを呼び出します。これはサーバーコンポーネントとクライアントコンポーネントの両方で使えます。 * **非同期の App Router コンポーネントでは**、[`gt-next/server`](/docs/react/nextjs/reference/functions/get-gt) の `await getGT` を使います。 ```tsx title="app/page.tsx" import { getGT } from 'gt-next/server'; export default async function Page() { const gt = await getGT(); return

{gt('Hello, world!')}

; } ``` `getGT` と `useGT` は、ビルド時点で確定しているコンテンツを翻訳します。リクエスト時にしか確定しないコンテンツには、代わりにランタイム翻訳を使用してください。 ## ランタイム翻訳 [#runtime] サーバーコンポーネントでも、`gt-next/server` の [`` コンポーネント](/docs/react/nextjs/reference/components/tx) と [`tx` 関数](/docs/react/nextjs/reference/functions/tx) を使って、リクエスト時にオンデマンドで翻訳できます。これらを使うのは、コンテンツが事前にわからない場合に限ってください。リクエストの処理中にサーバー上で General Translation API 経由で翻訳されるため、ビルド時の翻訳より低速です。ランタイム翻訳はサーバー専用で、クライアントコンポーネントでは利用できません。 ## 翻訳の実行方法 [#how-it-runs] `gt-next` は `NODE_ENV` に基づいて本番環境と開発環境を判別し、それぞれで異なる動作をします。 * **Production.** build-time の翻訳は、デフォルトでは General Translation CDN から読み込まれます。[ローカル翻訳](/docs/react/nextjs/config#translations) を設定している場合は、ローカルの bundle から読み込むこともできます。`` と `tx` によるオンデマンド翻訳は、サーバーコンポーネントでも引き続き実行されます。 * **Development.** 開発用 API キーを使用すると、デフォルトロケール以外のロケールでレンダリングされた content は、General Translation API 経由でオンデマンドに翻訳され、メモリ内にキャッシュされます。これにより、編集中でもロケールをプレビューできます。この遅延は本番環境では発生しません。 *注: 本番用の API キー (プレフィックスが `gtx-api-`) を使うと、ローカル開発中でも `gt-next` は本番環境と同様に動作し、オンデマンドの hot reload は無効になります。*