# General Translation React SDKs (gt-react, gt-next, gt-react-native): Localized navigation
URL: https://generaltranslation.com/en-US/docs/react/nextjs/link.mdx
---

title: Localized navigation
description: Navigate directly to localized App Router routes with General Translation's locale-aware Link component. API reference for Link.

---

The `<Link>` component from `gt-next/link` wraps Next.js's `<Link>` and adds the locale prefix to internal App Router URLs before navigation. This avoids an extra middleware redirect when changing locales. See the [App Router middleware setup](/docs/react/nextjs/app-router-middleware).

*Note: Pages Router apps should use `next/link` or `next/router` with Next.js's `locale` option. See [Pages Router locale routing](/docs/react/nextjs/pages-router-middleware).*

## Overview [#overview]

Import the default export from `gt-next/link` and use it like `next/link`. It accepts the same props and forwards refs.

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

export function Navigation() {
  return <Link href="/home">Home</Link>; // /en/home for an English visitor
}
```

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

**Type** `string | false | undefined`

Controls the locale prefix:

- **Omitted** - Use the current locale from [`useLocale`](/docs/react/reference/hooks/use-locale)
- **Locale string** - Link directly to that locale, such as from a language switcher
- **`false`** - Leave the href unchanged

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

// Current locale (default): /en/home
<Link href="/home">Home</Link>;

// Explicit locale: /fr/home
<Link href="/home" locale="fr">French</Link>;

// No prefix: /legal
<Link href="/legal" locale={false}>Legal</Link>;
```

External URLs remain unchanged. For object hrefs, `<Link>` localizes only the `pathname` and preserves the other fields.