Quick guide to Next.js i18n
Tags: webdev, react, nextjs, tutorial
Published: 2023-02-20 12:22:54

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](https://github.com/i18next/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:

```jsx
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:

```jsx
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:

```ts
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](https://devtranslate.app/) 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](https://devtranslate.app/) 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.

---

## Speed up your app's translation and localization

Use automated multi language translation for all your json, xml, arb and strings files instead of wasting time copy-pasting all your text into online translators.
 **[Try DevTranslate for free!](https://devtranslate.app)**

[![Try DevTranslate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79akplh0s9a6a3xblfe5.png)](https://devtranslate.app)