# General Translation React SDKs (gt-react, gt-next, gt-react-native): ローカライズされたナビゲーション
URL: https://generaltranslation.com/ja/docs/react/nextjs/link.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: General Translation のロケール対応 `Link` コンポーネントを使って、Next.js でローカライズ済みの App Router ルートに直接移動できます。`Link` の API リファレンス。

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

*注: Pages Router アプリでは、Next.js の `locale` オプションとともに `next/link` または `next/router` を使用してください。[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` のみをローカライズし、他のフィールドはそのまま保持します。

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.