# 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` からデフォルトエクスポートをインポートし、[`<GTProvider>`](/docs/react/reference/components/gt-provider) 内で `next/link` と同様に使用します。同じpropsを受け取り、ref も転送します。

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

export function Navigation() {
  return <Link href="/home">Home</Link>; // フランス語圏のユーザーには /fr/home
}
```

## `locale` プロパティ [#locale-prop]

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

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

* **省略時** - [`useLocale`](/docs/react/reference/hooks/use-locale) から取得した現在のロケールを使用します。`prefixDefaultLocale` が `true` でない限り、デフォルトロケールにはプレフィックスが付きません。
* **ロケール文字列** - 指定したロケールへ直接リンクします (言語切り替え機能など) 。`enableSmartRouting` が `false` でない限り、デフォルトロケールのプレフィックスは保持されます。
* **`false`** - href を変更せずにそのまま使用します

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

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

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

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

ローカライズされていないパスを渡してください。すでにロケールを含む href を渡すと、プレフィックスが二重に付与されます。外部 URL および [`pathRegex`](/docs/react/nextjs/config#path-regex) に一致しないパスは変更されません。href がオブジェクトの場合、`<Link>` は `pathname` のみをローカライズし、その他のフィールドはそのまま保持します。

`<Link>` は [`withGTConfig`](/docs/react/nextjs/config#routing) から `prefixDefaultLocale` と `enableSmartRouting` を読み取ります。`router.push()` に渡す場合など、リンクをレンダリングせずにパスだけをローカライズしたいときは、[`useLocalizeHref`](/docs/react/nextjs/reference/hooks/use-localize-href) を使用してください。

## Sitemap

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