How to Use Locale in Next.js Routing for Multilingual Sites

In Next.js, you enable locale routing by configuring the i18n field in next.config.js with your supported locales and default locale. Next.js then automatically prefixes URLs with locale codes and provides locale-aware routing and navigation via the useRouter hook.

Syntax

To use locale routing in Next.js, add an i18n object in your next.config.js file. This object includes:

• locales: an array of supported locale strings (e.g., ['en', 'fr', 'es']).
• defaultLocale: the default locale string (e.g., 'en').

Next.js uses this to prefix routes with locale codes and handle language detection.

javascript

module.exports = {
  i18n: {
    locales: ['en', 'fr', 'es'],
    defaultLocale: 'en',
  },
};

Example

This example shows how to configure locale routing and use the useRouter hook to get the current locale and switch languages.

javascript

/* next.config.js */
module.exports = {
  i18n: {
    locales: ['en', 'fr'],
    defaultLocale: 'en',
  },
};

/* pages/index.js */
import { useRouter } from 'next/router';

export default function Home() {
  const router = useRouter();
  const { locale, locales, defaultLocale } = router;

  const changeLocale = (newLocale) => {
    router.push(router.pathname, router.asPath, { locale: newLocale });
  };

  return (
    <main>
      <h1>{locale === 'en' ? 'Hello!' : 'Bonjour!'}</h1>
      <p>Current locale: {locale}</p>
      <div>
        {locales.map((loc) => (
          <button key={loc} onClick={() => changeLocale(loc)} disabled={loc === locale}>
            {loc.toUpperCase()}
          </button>
        ))}
      </div>
    </main>
  );
}

Output

<h1>Hello!</h1>
<p>Current locale: en</p>
<button disabled>EN</button>
<button>FR</button>

Common Pitfalls

• Not configuring i18n in next.config.js: Without this, locale routing won't work.
• Forgetting to use router.push with locale option: Changing language requires specifying the new locale in navigation.
• Assuming locale is part of query params: Locale is handled by Next.js routing, not query strings.
• Not handling default locale URLs: Default locale URLs do not get prefixed by default, which can confuse routing logic.

javascript

/* Wrong: Changing locale without specifying locale option */
router.push('/about');

/* Right: Specify locale to change language */
router.push('/about', '/about', { locale: 'fr' });

Quick Reference

Remember these key points for locale routing in Next.js:

• Configure i18n in next.config.js with locales and defaultLocale.
• Use useRouter to access current locale and locales.
• Use router.push with { locale: 'xx' } to switch languages.
• Default locale URLs are not prefixed unless localeDetection is disabled.

Key Takeaways

Enable locale routing by setting the i18n config in next.config.js with supported locales and a default locale.

Use the useRouter hook to get the current locale and available locales in your components.

Switch locales by calling router.push with the locale option to update the URL and language.

Default locale URLs do not get locale prefixes by default, so handle routing accordingly.

Always test locale switching to ensure URLs and content update as expected.