# General Translation React SDKs (gt-react, gt-next): ローカライズされたナビゲーション
URL: https://generaltranslation.com/ja/docs/react/nextjs/link.mdx
---

title: ローカライズされたナビゲーション
description: General Translation のロケール対応 `Link` コンポーネントを使って、Next.js でローカライズ済みのルートに直接移動できます。`Link` の API リファレンス。

---

`gt-next/link` の `<Link>` コンポーネントは Next.js の `<Link>` をラップし、遷移前に内部 URL にロケールプレフィックスを追加します。これにより、ロケールを切り替える際の余分なミドルウェア リダイレクトを回避できます。必要なリライトは、ローカライズされたリクエストに対してミドルウェアが処理できます。[App Router](/docs/react/nextjs/app-router-middleware) または [Pages Router](/docs/react/nextjs/pages-router-middleware) のセットアップを参照してください。

## 概要 [#overview]

`gt-next/link` からデフォルトエクスポートをインポートし、`next/link` と同様に使用します。同じpropsを受け取り、ref も転送します。

```tsx title="app/nav.tsx"
import Link from 'gt-next/link';

export function Navigation() {
  return <Link href="/home">Home</Link>; // 英語圏のユーザーには /en/home
}
```

## `locale` prop [#locale-prop]

**型** `string | false | undefined`

ロケールプレフィックスを指定します。

* **省略時** - [`useLocale`](/docs/react/reference/hooks/use-locale) の現在のロケールを使用します
* **ロケール文字列** - たとえば言語切り替え機能から、そのロケールへ直接リンクします
* **`false`** - href は変更されません

```tsx
import Link from 'gt-next/link';

// 現在のロケール（デフォルト）: /en/home
<Link href="/home">Home</Link>;

// 明示的なロケール: /fr/home
<Link href="/home" locale="fr">French</Link>;

// プレフィックスなし: /legal
<Link href="/legal" locale={false}>Legal</Link>;
```

外部URLは変更されません。href にオブジェクトを指定した場合、`<Link>` は `pathname` のみをローカライズし、他のフィールドはそのまま保持します。