DEV Community

Cover image for The easiest way to internationalize your NextJS application! 🌎
Jakub Skoneczny
Jakub Skoneczny

Posted on

The easiest way to internationalize your NextJS application! 🌎

From version 10, Next.js has built-in support for internationalized routing. This feature allows you to support multilanguage versions of your application just by providing a list of locales.

Start with changing your Next.js configuration, which is inside next.config.js:

module.exports = {
  i18n: {
    /**
     * Provide the locales you want to support in your application
     */
    locales: ['en-US', "pl"],
    /**
     * This is the default locale you want to be used when visiting
     * a non-locale prefixed path e.g. `/hello`
     */
    defaultLocale: "pl"
  },
}
Enter fullscreen mode Exit fullscreen mode

Accessing the locale information

After configuring the supported locales, you can access the locale information with the Next.js built-in router. The router has the following properties inside:

  • locale, which contains the currently active locale,
  • locales, which includes all configured locales,
  • defaultLocale, which provides for the configured default locale.

Router is accessible from the functional components by the useRouter hook:

const { locale, locales, defaultLocale } = useRouter()
Enter fullscreen mode Exit fullscreen mode

When doing SSR with getStaticProps or SSG with getServerSideProps, the locale information is provided in the function's context.

Transition between locales

You can use the built-in Link component along with the useRouter hook to transition between locales:

import Link from "next/link";

/**
 * Inside your component
 */
const { asPath, locale } = useRouter();

return (
  <>
    <Link active={locale === "pl"} href={asPath} locale="pl">
      PL
    </Link>

    <Link active={locale === "en-US"} href={asPath} locale="en-US">
      ENG
    </Link>
  </>
);
Enter fullscreen mode Exit fullscreen mode

Presenting multilanguage data

Now you can define an object in which we will store multi-language data for our components. After reading the current locale value, we can get translated texts just by accessing the property on an object:

/**
 * Define your multi-language data
 */
const data = {
  pl: {
    title: "CzeΕ›Δ‡!",
  },
  "en-US": {
    title: "Hello!",
  },
};

/**
 * Inside your component
 */
const { locale } = useRouter();
const title = data[locale].title;

Enter fullscreen mode Exit fullscreen mode

What about type safety?

When reading the value of locale from the useRouter hook, you may notice that your IDE identifies the type of the locale as a string. Unfortunately, at this moment, Next.js does not provide typescript support for locales.

If you want to get full type safety, you may want to introduce your own custom hook for reading the value from of locale

After defining your own type for supported locales and reading the current locale's value from the router, let's return this value with a simple as type assignment.

Thanks for reading! If you are interested in the latest tech news, you can follow my account since I plan to post here regularly. I also tweet on a regular basis so that you can follow My Twitter account as well!

Discussion (2)

Collapse
chadalen profile image
Chad Alen • Edited on

Unfortunetly this doesn’t work if you export your app as SSG. Next export doesn’t support i18n :(

Collapse
skona27 profile image
Jakub Skoneczny Author • Edited on

As far as I can tell, SSG pages don't support internationalized routing. But Next.js generates a different version for each locale. πŸ™‚

nextjs.org/docs/advanced-features/...