DEV Community

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

The easiest way to internationalize your NextJS application! 🌎

skona27 profile image Jakub Skoneczny ・2 min read

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">

    <Link active={locale === "en-US"} href={asPath} locale="en-US">
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)

Editor guide
chadalen profile image
Chad Alen

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

skona27 profile image
Jakub Skoneczny Author

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