# gt-next: General Translation Next.js SDK: 概要
URL: https://generaltranslation.com/ja/docs/next/introduction.mdx
---
title: 概要
description: General TranslationのNext.js SDKの概要
---
## はじめに
General Translation Next.js SDK は、Next.js アプリケーション向けのオープンソースの国際化 (i18n) ライブラリです。
[React SDK](/docs/react) をベースに構築されており、他の主要な i18n ライブラリと同等の機能を備えながら、Next.js アプリケーションを簡単かつ保守しやすい形で国際化するための包括的なツールセットを提供します。さらに、Next.js 固有の機能も利用できます。
この SDK は General Translation プラットフォームを使わずにスタンドアロンで利用でき、他の i18n ライブラリと同様に動作します。
一方で、より高度な機能を利用するために、General Translation プラットフォームと統合することもできます。
* 開発環境での翻訳のホットリロード
* AI による自動翻訳
* General Translation プラットフォームとの翻訳の同期
* 翻訳 CDN とのネイティブ統合
* 本番環境での React コンポーネントの on-demand 翻訳 (サーバー側)
## 概念
SDK で理解しておくべき主要な概念は 6 つあります。
[`withGTConfig`](/docs/next/api/config/with-gt-config) による初期化
[``](/docs/next/api/components/gtprovider) コンポーネント
[``](/docs/next/api/components/t) コンポーネント
[`useGT`](/docs/next/api/strings/use-gt) Hook
共有文字列向けの [`msg`](/docs/next/api/strings/msg) 関数
(オプション) [`useTranslations`](/docs/next/api/dictionary/use-translations) Hook
## `withGTConfig` を使った初期化
[`withGTConfig`](/docs/next/api/config/with-gt-config) 関数は、Next.js アプリケーションで SDK を初期化します。
SDK を設定するには、`next.config.[js|ts]` ファイルにこれを追加します。
```tsx title="next.config.ts"
import { withGTConfig } from 'gt-next/config';
const nextConfig = {
// next.config.ts のオプション
};
export default withGTConfig(nextConfig, {
// GT の設定
});
```
詳しくは、[withGTConfig APIリファレンス](/docs/next/api/config/with-gt-config)を参照してください。
## `` コンポーネント
[``](/docs/next/api/components/gtprovider) コンポーネントは、現在の言語や関連する翻訳などの翻訳コンテキストをアプリケーションに提供します。
```tsx
import { GTProvider } from 'gt-next';
export default function RootLayout({ children }) {
return (
{children}
);
}
```
**重要:** この provider はアプリケーション全体をラップするようにし、ルートレイアウトなど、できるだけコンポーネントツリーの上位に配置してください。
この provider が必要なのはクライアント側の機能のみです。サーバー側のみのアプリケーションでは不要ですが、含めることはできます。
詳細は、[`GTProvider`](/docs/next/api/components/gtprovider) の API リファレンスを参照してください。
## `` コンポーネント
[``](/docs/next/api/components/t) コンポーネントは、アプリケーション内のコンテンツを翻訳するための推奨手段です。
これは任意の JSX 要素をラップできる React コンポーネントで、要素の内容を対応言語で自動的にレンダリングします。
可能な限り [``](/docs/next/api/components/t) コンポーネントを使用することをおすすめします。翻訳時の柔軟性が最も高いためです。
文字列とは異なり、[``](/docs/next/api/components/t) コンポーネントは HTML コンテンツの翻訳にも使用できるため、文字列翻訳よりもはるかに強力です。
### 例
```tsx
Hello, world!
```
```tsx
Here is an image
```
```tsx
Formatting can be done easily with the `` component.
{1000}
{new Date()}
{1000}
```
[``](/docs/next/api/components/t) コンポーネントは、[``](/docs/next/api/components/num)、[``](/docs/next/api/components/datetime)、[``](/docs/next/api/components/currency) などの[変数コンポーネント](/docs/next/guides/variables)と組み合わせて、動的なコンテンツをフォーマットできます。
さまざまな [``](/docs/next/api/components/t) コンポーネントの使い方については、[`` コンポーネントガイド](/docs/next/guides/t) を参照してください。
## `useGT` Hook
[`useGT`](/docs/next/api/strings/use-gt) Hook は React の Hook で、[``](/docs/next/api/components/t) コンポーネントと同様に使用できますが、いくつかのトレードオフがあります。
この Hook は、文字列を翻訳するための関数を返します。
```tsx
const gt = useGT();
gt('Hello, world!');
```
[``](/docs/next/api/components/t) コンポーネントと比べると、[`useGT`](/docs/next/api/strings/use-gt) Hook のほうが、コードベース内でより柔軟に扱えます。
たとえば、ネストされた文字列を含む複雑なデータ構造がある場合、[``](/docs/next/api/components/t) コンポーネントでは扱いにくくなります。
```tsx
const gt = useGT();
const data = {
title: gt('Hello, world!'),
description: gt('This is a description'),
};
```
[`useGT`](/docs/next/api/strings/use-gt) Hook の詳細については、[strings](/docs/next/guides/strings) ガイドを参照してください。
## `msg` 関数
[`msg`](/docs/next/api/strings/msg) 関数は、複数のコンポーネントで使い回す文字列や、設定オブジェクトに保存する文字列を翻訳対象としてマークするために使います。
特に、ナビゲーションラベル、フォームメッセージ、アプリケーション内の複数箇所に表示されるテキストなど、共有コンテンツを扱う場合に便利です。
```tsx
// 翻訳対象の文字列をマークする
import { msg } from 'gt-next';
const navItems = [
{ label: msg('Home'), href: '/' },
{ label: msg('About'), href: '/about' },
{ label: msg('Contact'), href: '/contact' }
];
```
```tsx
// マークされた文字列をデコードして使用する
import { useMessages } from 'gt-next';
function Navigation() {
const m = useMessages();
return (
);
}
```
[`msg`](/docs/next/api/strings/msg) 関数は、文字列を翻訳メタデータ付きでエンコードし、[`useMessages`](/docs/next/api/strings/use-messages) (サーバーコンポーネントでは [`getMessages`](/docs/next/api/strings/get-messages)) がそれをデコードします。
アプリケーション全体で一貫した翻訳が必要な共有コンテンツには [`msg`](/docs/next/api/strings/msg) を使用してください。コンポーネント固有のコンテンツには、[``](/docs/next/api/components/t) または [`useGT`](/docs/next/api/strings/use-gt) の使用を推奨します。
`msg` 関数の詳細については、[shared strings](/docs/next/guides/shared-strings) ガイドを参照してください。
## `useTranslations` Hook
[`useTranslations`](/docs/next/api/dictionary/use-translations) は、指定したキーに対応する翻訳を取得するための関数を返す React Hook です。
```tsx title="dictionary.ts"
const dictionary = {
hello: {
world: 'Hello, world!',
},
};
```
```tsx title="App.tsx"
const translate = useTranslations();
translate('hello.world');
```
この挙動は、[`react-i18next`](https://react.i18next.com/) や [`next-intl`](https://next-intl-docs.vercel.app/) などの他の翻訳ライブラリと似ています。
アプリケーションで [`useTranslations`](/docs/next/api/dictionary/use-translations) Hook を使用することは推奨していません。[`useTranslations`](/docs/next/api/dictionary/use-translations) Hook を頻繁に使用すると、コードベースの保守性が低下し、
大きな技術的負債につながります。
代わりに、[``](/docs/next/api/components/t) コンポーネントまたは [`useGT`](/docs/next/api/strings/use-gt) Hook の使用を推奨します。
別の i18n ライブラリから移行する場合、[`useTranslations`](/docs/next/api/dictionary/use-translations) Hook はそのまま置き換えられるため、コードベースを段階的に移行する際に役立ちます。
[`useTranslations`](/docs/next/api/dictionary/use-translations) Hook の詳細については、[辞書](/docs/next/guides/dictionaries) ガイドを参照してください。
さらに詳しくは、[useTranslations API リファレンス](/docs/next/api/dictionary/use-translations) を参照してください。
***
## 次のステップ
**実際の動作を確認:** 各パターンを紹介する[動作するサンプルアプリ](/docs/next/tutorials/examples)を参照するか、完全な[アプリカタログ](https://app-catalog.generaltranslation.dev)をご覧ください。
* SDK を使った Next.js プロジェクトのセットアップ方法: [Quickstart](/docs/next)
* [``](/docs/next/api/components/t) コンポーネントを使った JSX コンテンツの翻訳方法: [JSX Translation ガイド](/docs/next/guides/t)
* [`useGT`](/docs/next/api/strings/use-gt) Hook を使った文字列の翻訳方法: [String Translation ガイド](/docs/next/guides/strings)
* [`msg`](/docs/next/api/strings/msg) 関数を使った共有文字列: [Shared Strings ガイド](/docs/next/guides/shared-strings)