DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,503 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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!

Top comments (3)

Collapse
 
cadams profile image
Chad Adams • 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/...

Collapse
 
spock123 profile image
Lars Rye Jeppesen • Edited on

Property 'active' does not exist on Link

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!