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 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';
 
// 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 response to a form submission, next-intl provides a convience API that wraps useRouter from Next.js 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');

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

If you want to interrupt the render of a Server Component 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');
  }
 
  // ...
}