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

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()

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>
  </>
);

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;

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

Jakub Skoneczny

@skonecznyjakub

First time ever I've used the NextJs i18n feature. I've created a custom useLang hook to have full typescript support inside my components.

Created with @carbon_app

#react #Nextjs #javascript #TypeScript #programming

17:05 PM - 06 Jan 2021

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!