How to navigate when using `Next-intl` and `next/link`

ONLINECAST

2 min read

·

04-10-2024

8

0

Share

Navigating with Next-intl and next/link: A Guide to Seamless Internationalization

When building internationalized websites with Next.js, you want to ensure a smooth user experience, even when navigating between different language versions. This is where Next-intl and next/link come in. But combining these powerful tools can be tricky. Let's explore how to navigate seamlessly in a multilingual environment.

The Challenge: Navigating with Language Considerations

Imagine you have a website with multiple language versions, and you want users to seamlessly switch between them. You might use next/link for internal navigation, but how do you account for language changes? Consider this scenario:

// pages/about.js
import { useTranslation } from 'next-intl';
import Link from 'next/link';

export default function About() {
  const { t } = useTranslation('about');

  return (
    <div>
      <h1>{t('title')}</h1>
      <Link href="/about">
        <a>{t('backToAbout')}</a>
      </Link>
    </div>
  );
}

This code snippet uses next-intl for translations but simply uses next/link for internal navigation. The problem arises when the user switches languages. Clicking the link will still point to /about, potentially leading to the wrong language version of the page.

The Solution: Utilizing next-intl's useRouter and locale

The key lies in utilizing next-intl's useRouter and locale methods in conjunction with next/link. By dynamically constructing the href based on the current locale, we ensure navigation stays within the chosen language.

// pages/about.js
import { useTranslation, useRouter, useLocale } from 'next-intl';
import Link from 'next/link';

export default function About() {
  const { t } = useTranslation('about');
  const router = useRouter();
  const locale = useLocale();

  return (
    <div>
      <h1>{t('title')}</h1>
      <Link href={`/${locale}/about`}>
        <a>{t('backToAbout')}</a>
      </Link>
    </div>
  );
}

In this solution:

1. We access the current locale using useLocale().
2. We dynamically construct the href for next/link by adding the current locale to the path.

Now, when a user clicks the link, they will be redirected to the "/about" page in the current language. This ensures a smooth user experience regardless of language changes.

Additional Considerations

• next-intl's useRouter for Dynamic Routing: next-intl's useRouter can be used to dynamically construct links for more complex situations, such as navigating to pages with dynamic segments.
• Locale Prefixes: Remember to configure your next.config.js to include the locale prefix in your URLs. This ensures your application routes correctly when the user navigates between languages.

Conclusion

Mastering navigation with next-intl and next/link is crucial for creating a seamless internationalized experience. By utilizing the power of next-intl's language management tools and dynamic path construction, you can create websites that adapt to user preferences, ensuring a positive experience for all.