Next.js 13 internationalized navigation

next-intl provides drop-in replacements for common Next.js navigation APIs that automatically handle the user locale behind the scenes.

`Link`

This component wraps next/link (opens in a new tab) and automatically prefixes the href with the current locale as necessary. If the default locale is matched, the href remains unchanged and no prefix is added.

import Link from 'next-intl/link';
 
// When the user is on `/en`, the link will point to `/en/about`
<Link href="/about">About</Link>
 
// You can override the `locale` to switch to another language
<Link href="/" locale="de">Switch to German</Link>

`useRouter`

If you need to navigate programmatically, e.g. in an event handler, next-intl provides a convience API that wraps useRouter from Next.js (opens in a new tab) and automatically applies the locale of the user.

'use client';
 
import {useRouter} from 'next-intl/client';
 
const router = useRouter();
 
// When the user is on `/en`, the router will navigate to `/en/about`
router.push('/about');
 
// You can override the `locale` to switch to another language
router.push('/about', {locale: 'de'});

How can I change the locale for the current page?

By combining usePathname with useRouter, you can change the locale for the current page programmatically.

'use client';
 
import {usePathname, useRouter} from 'next-intl/client';
 
const pathname = usePathname();
const router = useRouter();
 
router.replace(pathname, {locale: 'de'});

`usePathname`

To retrieve the pathname without a potential locale prefix, you can call usePathname.

'use client';
 
import {usePathname} from 'next-intl/client';
 
// When the user is on `/en`, this will be `/`
const pathname = usePathname();

`redirect`

⚠️

This API is only available in the Server Components beta.

If you want to interrupt the render and redirect to another page, you can invoke the redirect function from next-intl/server. This wraps the redirect function from Next.js (opens in a new tab) and automatically applies the current locale.

import {redirect} from 'next-intl/server';
 
export default async function Profile() {
  const user = await fetchUser();
 
  if (!user) {
    // When the user is on `/en/profile`, this will be `/en/login`
    redirect('/login');
  }
 
  // ...
}

Middleware TypeScript