# General Translation React SDKs (gt-react, gt-next): 本地化导航
URL: https://generaltranslation.com/zh/docs/react/nextjs/link.mdx
---
title: 本地化导航
description: 使用 General Translation 的符合区域设置的 Link 组件，在 Next.js 中直接跳转到本地化路由。Link 的 API 参考。

---

`gt-next/link` 提供的 `<Link>` 组件封装了 Next.js 的 `<Link>`，并会在导航前为内部 URL 添加区域设置前缀。这样在切换区域设置时可避免额外的 middleware 重定向；middleware 可以在本地化请求中处理任何必需的重写。请参阅 [App Router](/docs/react/nextjs/app-router-middleware) 或 [Pages Router](/docs/react/nextjs/pages-router-middleware) 的设置。

## 概览 [#overview]

从 `gt-next/link` 导入默认导出，并像使用 `next/link` 一样使用它。它接受相同的属性，并支持转发 ref。

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

export function Navigation() {
  return <Link href="/home">Home</Link>; // 英语访客对应 /en/home
}
```

## `locale` 属性 [#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`，其他字段保持不变。