# General Translation React SDKs (gt-react, gt-next, gt-react-native): Localized navigation
URL: https://generaltranslation.com/en-US/docs/react/nextjs/link.mdx
Docs index: https://generaltranslation.com/llms.txt
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` inside [`<GTProvider>`](/docs/react/reference/components/gt-provider). 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>; // /fr/home for a French 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). The default locale is not prefixed unless `prefixDefaultLocale` is `true`.
- **Locale string** - Link directly to that locale, such as from a language switcher. The default locale keeps its prefix unless `enableSmartRouting` is `false`.
- **`false`** - Leave the href unchanged

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

// Current locale (default): /fr/home, or /home for the default locale
<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>;
```

Pass unlocalized paths; hrefs that already contain a locale are prefixed again. External URLs and paths that don't match [`pathRegex`](/docs/react/nextjs/config#path-regex) remain unchanged. For object hrefs, `<Link>` localizes only the `pathname` and preserves the other fields.

`<Link>` reads `prefixDefaultLocale` and `enableSmartRouting` from [`withGTConfig`](/docs/react/nextjs/config#routing). To localize a path without rendering a link, such as for `router.push()`, use [`useLocalizeHref`](/docs/react/nextjs/reference/hooks/use-localize-href).

## Sitemap

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