i18n with Next.js + React.js + Typescript
By Gabriel Messias da Rosa
Requirements to understand the content
HTML CSS Typescript React.js Next.js
ATTENTION! Requires intermediate/advanced knowledge of the Next.js framework and the technologies involved in this article.
Internationalization (also known as i18n) and translation are the means of adapting the software to different languages, regional peculiarities and technical requirements of a target language.
Let's understand how i18n works on a website that uses Next.js + React as frameworks. We will carry out a simple but very efficient configuration to internationalize your website.
Starting with version 10 of Next.js, it is possible to perform this configuration in a simple, clear and native way.
The advantage of using the native i18n of Next.js, without external libraries, is the speed and fluidity with which the texts are changed on the site. Thus avoiding page reloading, preventing layout shift, which greatly improves user experience.
Let's suppose we have the following website:
We need it to have a “select” component that changes all the text on the page from English to Portuguese (Brazilian). We will also have to make, based on the default language of the user's browser, the language dynamically change, providing more comfort for the user when accessing our site.
Configuring the next.config.js file
The first step of configuring the i18n with Next.js is to correctly configure the next.config.js file.
For that add the default configuration provided by the official Next.js documentation.
Create or edit the next.config.js file and add the i18n module. As in the example below:
The “locales” attribute must be an array of languages supported by the website. The other attribute, “defaultLocale”, must be one of the languages configured in “locales”. It will be the default language of the website if the language the user is using in their browser is not supported.
This configuration will use “subpath base routing“, that is, when we change the language to pt-BR the site will present itself as “www.example.com/pt-BR” and for the defaultLocale it will only be www.example.com/
As for the “lang” property of the <html/> tag, don't worry about that. Next.js “under the hood” identifies the browser's default language and changes this property to the user's preferred language.
Organizing files with text translations
From here, the developer's creativity comes into play, you can create a React context, a JSON file, an API with the translations, or whatever you prefer as long as you can access this data. In this case we will make it as vanilla as possible.
We organize the files inside a folder called “i18n” and inside this folder the files named with the locales that we configured in the next.config.js file. In this case we will only have 2 files, the file “en.ts” and “pt-br.ts”, as in the example below.
According to your needs, assemble objects inside each file to represent each component and page that deserves a translation of its texts.
For example, my “en.ts” file looks like the example below.
For the file in another language, do the same, just changing the texts for your translation.
The pt-br translation file would look like this.
Applying the translation to the website
We will use one more feature of Next.js, the useRouter hook of Next.js. Deconstruct the variable “locale” from useRouter, then declare a constant called “translation” and make it return a condition: if locale is equal to “en” return the values from the en.ts file, otherwise return the values from the pt-br.ts file.
Adapt the translation return according to the amount of translations your site must support.
To do the translation, just replace the text of h1, which is hard coded, to the corresponding value in the translation file (en.ts and pt-br.ts)
As in the example below:
Now the H1 tag on our home page is being translated to pt-br in case any user from Brazil is accessing our site.
Repeat the process for each text that needs to be translated.
The result is something like the example below.
Select of available translations
This is the simplest way to “switch” from one language to another.
Create a Select component to translate the page into another language.
Remembering that we are making it as vanilla as possible, so we will create a simple SelectLanguage component, with only the necessary options and a function to change the site's language, pushing the user to the selected translation route.
As in the example:
Add this select to a place where it appears on every page of the site, for a better user experience. In this case I added SelectLanguages to the header component.
Finally, we have a page being translated immediately. No page reloads or redirects.
This is the simplest way to internationalize a site that uses Next.js. With this knowledge, you are now able to adapt the presented techniques to your reality. Check the official Next.js documentation for what the next i18n has to offer.
You can also check out the sample project code cited in this article: