Quick guide to Next.js i18n

Internationalization or i18n is an essential aspect of web & app development, as it enables reaching a global audience by opening up our application to users who prefer content in their native language. That makes it easy to find a niche by catering to users who are overlooked by everyone who just goes with the generic approach of providing everything only in English.

Next.js

When thinking about applications the best practice currently is using Next.js - a popular React-based framework, which provides a number of technological benefits like pre-rendering, server-side rendering, code splitting, easy routing and static exports. Together that means one thing: speed, the app will work blazingly fast while also providing React-based functions.

More importantly for our use case, it provides built-in support for i18n, making it easier for developers to create apps that can be easily translated into any number of different languages.

next-i18next

There are several strategies for implementing Next.js i18n. The chosen approach will likely depend on the specific needs of the app and our own preferences. Opting for a custom solution is always possible, that said there is a widely used and popular strategy: using the next-i18next library, which provides a simple and efficient way to add i18n support to Next.js.

Installation & configuration

To get started with next-i18next, we need to install the library as a dependency in our project via a simple command (having React and Next installed is also required):

yarn add next-i18next react-i18next i18next

We also need to organize our translations. In almost every case this will be made via the /locales folder with subfolders for various languages like /en, /pl and the like. Though for those intent on keeping some other folder structure it’s quite simple to do so - all it requires is specifying the paths in localePath and localeStructure.

Next we need to create a configuration file, this file should specify what our default language is and what other languages we want to use in our project. The structure is pretty self-explanatory:

module.exports = {
    i18n: {
        defaultLocale: 'en',
        locales: ['en', 'de'],
    },
};

Once we have the configuration file, we can then use the next-i18next library to add i18n support to Next.js in our app. This also requires just a few simple additions to the Next.js config file:

const { i18n } = require('./next-i18next.config');

module.exports = {
    i18n,
};

The final step is wrapping the project with the appWithTranslation component. This provides i18next context to every page in it and should be included in the _app file like so:

import { appWithTranslation } from 'next-i18next';

const MyApp = ({ Component, pageProps }) => <Component {...pageProps} />;

export default appWithTranslation(MyApp);

With just these few simple steps, we now have a working i18n setup in our Next.js application. We can be sure the translations will be working as they should, but here comes the caveat: where do we get them from?

Yes, there’s always the option of either relying on the services of a translator or painstakingly copy-pasting everything into google translate and then back again into each and every string in our json files.

DevTranslate

But it would be a bummer to go through that setup for next-i18next just to then do the actual translations manually and waste so much time and effort on it. Fortunately, there’s DevTranslate which lets you automate the translation process by requiring just a few clicks to translate your json file into up to 26 languages while keeping the syntax and order intact. This way all you have to do is:

• open your default language folder
• upload the files from there to our in-browser translator
• click play & wait a few seconds
• download the translated files
• put them in the corresponding subfolders for each language

With that your app is now internationalized! To sum it up implementing i18n in Next.js is a straightforward process thanks to the built-in support and the next-i18next library. On top of that DevTranslate provides an easy way to automate the translation process as well giving you a fully internationalized app with minimal effort. Your app is now open to a broader and more diverse audience and feels more tailored to the users. With how simple Nextjs i18n is if you havent done it yet means you're losing out.