
NextJS, a well-known framework among React developers, provides multiple libraries that create a very developer-friendly environment. The most popular ones are i18Next, [next-translate](/blog/posts/next-translate/) and, our main focus in this blog post, [next-18next](https://github.com/isaachinman/next-i18next), a translation library that does a fantastic job helping in translation management. The following blog post will show you how to set up next-i18n in your NextJS app and [manage translations with SimpleLocalize](/). Take a look at our [demo app](https://github.com/simplelocalize/simplelocalize-next-i18next) for the reference.

## About next-i18next

Next-i18next is a NextJS framework that completes and expands the possibilities of NextJS basic i18n setup, which focuses mainly on automation of i18n routing using locales. Next-i18next uses i18next and react-i18next at its core, but it is simple to install, and the configuration takes only a few steps. 

Next-i18next offers additional benefits for NextJS app localization, like:

- easy integration with translation content management like SimpleLocalize
- components/hooks for React components translation
- production ready with SSG/SSR support (Static Site Generation and Server-Side Rendering)
- allows namespaces
- customizable interpolation
- supports code-splitting
- easy setup and configuration

The standard file structure for next-i18next with namespaces will look like this:

```bash
.
├── en
│   ├── common.json
│   └── home.json
├── es
│   ├── common.json
│   └── home.json
├── it
│   ├── common.json
│   └── home.json
└── pt_PT
    ├── common.json
    └── home.json
```

There are four **languages** in our app (`en`, `es`, `it` and `pt`) and two **namespaces**, `common` and `home`. **A namespace is usually one page of your website or app.** In such a multiple-file setup, next-i18next loads only the translations that it needs to display from a selected locale.

![translation files with namespaces sample (i18next)](/docs/next-i18next/sample-common-namespace-with-translations-in-json-i18next.png)


## Next-i18next configuration

The basic next-i18next configuration takes only few steps and will allow you to improve translation management in your app. See the below step-by-step guide to get started.

### Install next-i18next

Use the simple command below to start with next-i18next installation with NPM or Yarn:

```bash
npm install --save next-i18next
```

### Create i18n configuration file

Now, create a configuration file in the project's root, `./next-i18next.config.js`.

```typescript
// 📦 file: ./next-i18next.config.js

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

```

### Add next-i18next to your NextJS app

The last step in the configuration is importing next-i18next configuration into next.config.js file.

```typescript
// 📦 file: ./next.config.js

const {i18n} = require("./next-i18next.config");
const nextConfig = {
  reactStrictMode: true,
  i18n
}

module.exports = nextConfig
```

### Create your file structure 

When next-i18next is installed and configured, create your file structure for translations with languages and namespaces. Check the standard structure we described at the beginning of this blog post.

The root directory for your translations is `/locales/{lang}/{ns}`.json where `lang` is your locale (en, es, it, pt) and `ns` is your namespace (common, home). 

## How to manage next-i18next translation files?

Next-i18next is a great framework which makes translation management way easier. Use it together with SimpleLocalize translation editor to manage localization process of your app like a pro. 😎

With SimpleLocalize, you can easily add new languages, manage existing translations and even **auto-translate all translations**! See how to get started and connect your NextJS app with next-i18next and SimpleLocalize.

### Install SimpleLocalize CLI

Use [SimpleLocalize CLI](/docs/cli/get-started/) to easily extract translation keys from your project and upload them to SimpleLocalize translation editor. 

Issue the command below to start the installation.

```bash
curl -s https://get.simplelocalize.io/2.5/install | bash
```

Next, **create a configuration file** that will integrate your project with your SimpleLocalize account in no time.

```yaml
# 📦 file: ./simplelocalize.yml
apiKey: YOUR_PROJECT_API_KEY
downloadFormat: single-language-json
downloadPath: ./locales/{lang}/{ns}.json

uploadFormat: single-language-json
uploadPath: ./locales/{lang}/{ns}.json
```

### Upload your translation files to SimpleLocalize

To upload your translations to SimpleLocalize project, use the installed CLI by running the command below:

```bash
$ simplelocalize upload
```

Or check [more import options](/docs/cli/upload-translations/) available for multiple file formats.

![Uploading translations with namespaces for next-i18next](/docs/next-i18next/upload-translations-with-namespaces.mp4)


### Translate your app with SimpleLocalize online editor

Now, the best part of translation management begins. Log in to your SimpleLocalize account, open your project and start managing your translations. Use [SimpleLocalize online translation editor](/translation-editor/) to edit translations, add more languages, or [translate them automatically with DeepL or Google Translate](/blog/posts/how-to-use-auto-translation/). **Share the project with your team members** and send access to translators using intuitive [access sharing options](/docs/general/project-sharing/).

![Manage your translation strings in Translation Editor](/video/translation-editor-change-translations.mp4)

[Sign up for free Community plan](/register/) and start managing your localization process in your way in our feedback-driven app.

### Download translations to your app

When you are done with editing your translation, [download](/docs/cli/download-translations/) localized files using CLI, or with one of multiple supported file format.

```bash
$ simplelocalize download
```

![Downloading translations with namespaces for next-i18next](/docs/next-i18next/download-translations-with-namespaces.mp4)


### Next-i18next demo app

To try out how next-i18next goes with NextJS and SimpleLocalize and check an **example of NextJS localization**, run our demo app locally on your computer. Download the files from [Github repository](https://github.com/simplelocalize/simplelocalize-next-i18next) and test how it works.

![Example next-i18next project with NextJS](/blog/next-i18next-example.png)


## Localize your NextJS app with SimpleLocalize

App or website localization can be a challenging  task, but you can make it a pleasant experience with great tools and localization frameworks. NextJS has a variety of external libraries that create a comfortable base for your work. Not only next-i18next, but also next-translate or next-intl and much more. Integrating your app with SimpleLocalize will improve your satisfaction during your app localization process.

![import multi-language-json to simplelocalize](/blog/import-your-translations-from-file.png)

In case you have any doubts or need help with integrating your project with SimpleLocalize, check our [documentation](/docs/) or contact Jakub directly at jakub@simplelocalize.io.


How to translate NextJS app with next-i18next?


NextJS, as a very popular framework among React programmers, offers a variety of features and external libraries,
that create a very developer-friendly environment. One of them is [next-translate, a translation library](https://github.com/vinissimus/next-translate) that well known for its simple set up and use.
In this blog post, you will learn to configure next-translate in your NextJS app,
and to [manage translations with SimpleLocalize](/) assist.


## About next-translate

Next-translate is a great choice for managing your translations in your NextJS application. It is easy to configure and use, even for beginners.
It supports basic internationalization (i18n) like plurals or Trans component (to use HTML inside translated text),
loads only necessary translations which extremely saves your app memory, and it doesn't take a lot of storage. 

The library uses namespaces that allow you to split translations into multiple files. The standard file structure looks like this:

```bash
.
├── en
│   ├── common.json
│   └── home.json
├── es
│   ├── common.json
│   └── home.json
├── pl
│   ├── common.json
│   └── home.json
└── fr
    ├── common.json
    └── home.json
```

There are four **languages** in our app (`en`, `es`, `fr` and `pl`) and two **namespaces**, `common` and `home`. **A namespace is usually one page of your website or app.** Such file structure is clear and easy to manage. Thanks to this setup, next-translate will only load the translations that are needed to display translated content in a selected locale. 

![Sample common namespace with translations in JSON](/docs/next-translate/sample-common-namespace-with-translations-in-json.png)

## Next-translate configuration

The configuration of next-translate takes only a few steps, and they are straightforward to follow. See below the step-by-step setup for your NextJS app.

### Install next-translate

To get started, install next-translate. You can do that with either NPM or Yarn. Simply run the command in your console.

```bash
npm install --save next-translate
```

### Create i18n configuration file

Create a configuration file, i18n.json, in your project's root. It will look like below, where you set the locales you will use in your project, the default language and your namespaces (one for each page).

```json
{
  "locales": ["en", "es", "fr", "pl"],
  "defaultLocale": "en",
  "pages": {
    "*": ["common"],
    "/": ["home"]
  }
}

```

### Create your namespaces file structure

The next step is to create your file structure with languages and namespaces. Check the example above for the file structure. 

The root directory for your translations is `/locales/{lang}/{ns}.json` where `lang` is your locale (en, es, fr, pl) and `ns` is your namespace (common, home).

### Add next-translate to your app

The last step of the configuration of next-translate is to add it to your app, to `next.config.js` file.

```typescript
// 📦 file: ./next.config.js
const nextTranslate = require('next-translate')

module.exports = nextTranslate({
  webpack: (config, { isServer, webpack }) => {
    return config;
  }
})
```

And that's all. With those four steps, you are ready to translate your app with SimpleLocalize.

## How to manage next-translate translation files?

SimpleLocalize can help you translate your keys automatically and manage them in a great translation editor. Adding a new language will become as effortless as you could ever imagine. How to get started, then?

### Install SimpleLocalize CLI

[SimpleLocalize CLI](/docs/cli/get-started/) will get translation files from your project, extract them and upload to SimpleLocalize.

Run the command below to start the installation.

```bash
curl -s https://get.simplelocalize.io/2.5/install | bash
```

Next, **create a configuration file** to smoothly integrate your project with your SimpleLocalize account.

```yaml
# 📦 file: ./simplelocalize.yml
apiKey: YOUR_PROJECT_API_KEY
downloadFormat: single-language-json
downloadPath: ./locales/{lang}/{ns}.json

uploadFormat: single-language-json
uploadPath: ./locales/{lang}/{ns}.json
```

### Upload translations to SimpleLocalize

You can use the installed CLI to [upload your translation files](/docs/cli/upload-translations/) to your project in
SimpleLocalize. Run the command below:

```bash
$ simplelocalize upload
```

![Uploading translations with namespaces for next-translate](/docs/next-translate/upload-translations-with-namespaces.mp4)

### Use SimpleLocalize to translate your app

Now, the fun begins. Use SimpleLocalize translation editor to change your translations, add new languages, or translate the keys automatically with DeepL or Google Translate. [Translation editor features](/blog/posts/translation-editor-explained/) will help you control translation progress and work with translators within one translation management system. 

![Manage your translation strings in Translation Editor](/video/translation-editor-change-translations.mp4)

[Sign up for free Community plan](/register/) to get your translations on track for you and your team.

### Download translations to your project

When your translation changes are ready, you can [download](/docs/cli/download-translations/)
them to your project with a CLI command:

```bash
$ simplelocalize download
```

![Downloading translations with namespaces for next-translate](/docs/next-translate/download-translations-with-namespaces.mp4)

### Next-translate demo app

You can try how i18n next-translate library works in a NextJS app with our demo.
Check the [GitHub repository](https://github.com/simplelocalize/simplelocalize-next-translate) and run it locally on your computer.

![Example next-translate project with NextJS](/blog/next-translate-example-application.jpg)

## Localize your NextJS app with SimpleLocalize

Localization of a website or app can be a challenging task. Fortunately, there are great tools that help both developers and translations to do their job with ease. SimpleLocalize connects the workflow for all team members of the project and helps to manage the translation process efficiently. Next-translate is a great start to begin the i18n of your NextJS app. 

![import multi-language-json to simplelocalize](/blog/import-your-translations-from-file.png)

In case you have any doubts or need help with integrating your project with SimpleLocalize, check our [documentation](/docs/) or contact Jakub directly at jakub@simplelocalize.io.


How to translate NextJS app with next-translate?


The [CSA Research study](https://csa-research.com/Blogs-Events/Blog/do-b2b-buyers-value-localization) shows that 66% of business users are more likely to pay more for a localized service than one in a foreign language.
The majority prefer to consume and interact with content in their native language, as it feels more natural and simply right, even for users with advanced English proficiency. The preference for localized products is well noted in software localization.

As you can see, internationalization of your project is critical for its success, if you plan to go to market in a different country. To take that step and introduce i18n support in your project, there are a few important thighs to consider while searching for the right tools. In this blog post we will cover one of them, a very base for proper software localization, which is localization library.

You can access our full [list of localization libraries and tools on Github](https://github.com/jpomykala/awesome-i18n). You are welcome to [add your resources](https://github.com/jpomykala/awesome-i18n) as a pull requests or just [create a new issue](https://github.com/jpomykala/awesome-i18n/issues/new).

## Top React localization libraries

See our list of the best React libraries we gathered. We focused mainly on ReactJS, React Native and Expo libraries.

### 1. FormatJS

[FormatJS](https://formatjs.io) provides i18n and l10n support for web applications with several packages, such as react-intl, which is a package specifically designed for use with React.
React-intl provides React components and utilities for formatting messages, dates, times, and numbers according to different locales. It also supports pluralization and gender agreement.

![FormatJS library](/blog/react-i18n-libraries/format-js.png)

#### See also
- [Integration guide: translations hosting](/docs/integrations/format-js/) - check how to use SimpleLocalize with FormatJS library
- [Extract i18n keys from FormatJS project](/docs/cli/i18n-keys-extraction/) - learn more about message extraction done by SimpleLocalize CLI
- [Blog post: FormatJS and React application localization](/blog/posts/formatjs-reactjs-internationalization/) - blog post about FormatJS translation management with SimpleLocalize
- [Github repository: example project](https://github.com/simplelocalize/simplelocalize-react-intl) - example project code with configured FormatJS
- [Live demo](https://react-intl.simplelocalize.io) - see live demo of FormatJS (react-intl) and SimpleLocalize integration


### 2. next-translate

[next-translate](https://github.com/vinissimus/next-translate) is a lightweight translation library for Next.js. It provides an easy way to add i18n support to Next.js projects, with features such as automatic language detection, dynamic translations, and support for multiple locales.

It all started when the developers realised how important is i18n for SEO, and thanks to the community, Next.js decided to introduce internationalized routing.
[Internationalized routing became available](https://nextjs.org/blog/next-10#internationalized-routing) in Next.js 10.

![next-translate](/blog/react-i18n-libraries/next-translate.png)

#### See also
- [Blog post: How to translate NextJS app with next-translate](https://simplelocalize.io/blog/posts/next-translate/) - step-by-step instruction for localization with next-translate


### 3. react-i18next

[React-i18next](https://react.i18next.com/) is one of the most popular localization libraries among React developers.
Commonly used in React localization.
It can be used with React Web and React Native.
i18next was primary created for React only,
but the community gathered among the library created integrations for other frontend frameworks such as AngularJS,
Vue.js and more.

#### See also
- [Integration guide: translations hosting](/docs/integrations/i18next/) - check how to use SimpleLocalize with the i18next library
- [Extract i18n keys from i18next library](/docs/cli/i18n-keys-extraction/) - use SimpleLocalize CLI to find translation keys used in the project
- [Blog post: i18next in 3 steps](/blog/posts/i18next-reactjs-localization/) - blog post about integrating SimpleLocalize with i18next
- [Github repository: example project](https://github.com/simplelocalize/simplelocalize-i18next) - sample project with configured i18next with **'http-backed'** and **'loadpath'**
- [Live demo](https://i18next.simplelocalize.io) - see live demo of i18next with configured http-backend and 'loadpath'.

![react localization](/blog/i18next-simplelocalize.png)

### 4. LinguiJS

[LinguiJS](https://github.com/lingui/js-lingui) is a JavaScript library for internationalization and localization of web applications. It offers message extraction and formatting, supports dynamic content, and integrates with popular front-end frameworks like React and Vue.js, Node.js, and Angular.
It provides a comprehensive and well optimized set of tools for developers to create applications that can be easily adapted to different languages

[Comparision of LinguiJS with react-intl](https://lingui.dev/misc/react-intl)

![next-translate](/blog/i18n-linguijs.png)


### 5. react-native-localize

[React-native-localize](https://github.com/zoontek/react-native-localize) is a library for React Native that provides a set of tools for internationalizing and localizing mobile applications. It offers a range of features such as date and time formatting, number formatting, and text direction based on the user's locale. It also provides a simple API for translating strings in your application, making it easy to adapt your app to different languages and cultures.

This library is a toolbox for your React Native app localization.

![react-native-localize](/blog/react-i18n-libraries/react-native-localize.png)


### 6. FormatJS CLI

[FormatJS CLI](https://formatjs.io/docs/tooling/cli/) extracts messages from a project with FormatJS library. Learn [how to upload extracted translation messages to SimpleLocalize](/docs/integrations/format-js-cli).

![formatjs cli](/blog/react-i18n-libraries/i18n-formatjs-cli.png)


### 7. react-i18nify

[React-i18nify](https://github.com/sealninja/react-i18nify) is a simple group of translation and localization components and helpers for your React application.

![react-i18nify](/blog/react-i18n-libraries/react-i18nify.png)



### 8. react-littera

[react-littera](https://github.com/Assembless/react-littera) is a fairly new library for React localization.
It was created to make maintaining and managing translations easier. It allows placing translations right beside your component, as well as storing translations globally. Littera's structure was inspired by react-jss.

![react littera for managing translations](/blog/react-i18n-libraries/react-littera.png)

```shell
npm install --save @assembless/react-littera
```

### 9. react-persian

[react-persian](https://github.com/evandhq/react-persian) is a library for Persian localization in React. It provides a set of components for Persian localization.
Are you developing an application for a Persian audience? You should definitely check this library out.

![react-persian](/blog/react-i18n-libraries/react-persian.png)



### 10. react-translate

[bloodyowl/react-translate](https://github.com/bloodyowl/react-translate) is a set of React utilities for simple i18n handling.
The library is a bit outdated, last commit was in 2019, and last release is dated to end of 2016.

**If some reason you didn't like FormatJS, then the library is worth checking.**

![react-translate](/blog/react-i18n-libraries/react-translate.png)


### 11. react-translated

[react-translated](https://github.com/amsul/react-translated) is a **dead simple way to add complex translations** in a React project.
The library is a bit outdated but definitely work checking!

![react-translated](/blog/react-i18n-libraries/react-translated.png)


### 12. react-intl-hooks (for FormatJS)

[React-intl hooks](https://github.com/CreateThrive/react-intl-hooks) is a small and fast library
that you can use to replace FormatJS components.
It combines the great things about react-intl along with React hooks.
It provides a `t` function, which works like the `t` function in the i18next library.

```tsx
const t = useFormatMessage();
t({ id: 'learn-react', defaultMessage: 'Learn React' })
```

![react-intl hooks](/blog/react-i18n-libraries/react-intl-hooks.png)

```shell
npm install --save react-intl-hooks
```

### 13. typesafe-i18n

[typesafe-i18n](https://github.com/ivanhofer/typesafe-i18n) is an opinionated, fully type-safe, lightweight localization library for TypeScript and JavaScript projects with no external dependencies.

![typesafe-i18n - demo](/blog/typesafe-i18n-demo.mp4)

```shell
npm install --save typesafe-i18n
```

### 14. SimpleLocalize CLI + TMS

SimpleLocalize allows you to upload and manage translation keys in the cloud.
The free account allows you to host up to 250 translation keys,
and you can test it for bigger files during a 14-day trial.
You can [create your account here](/register/).

#### 1. Upload translations

Upload your translation files using [SimpleLocalize CLI](/docs/cli/upload-translations/), [API](/docs/api/update-translations/) or [import translations](/docs/general/import/) using our web app and file format of your preference.

![How to upload translation files with command-line tool](/docs/cli-upload-translations.mp4)

#### 2. Translate in editor

Add new languages and translations in a simple [translation editor](/docs/general/translation-editor/), adjusted to the whole team's needs. Show code or key descriptions, adjust editor view to your preferences, and work in a developer-friendly environment.

![How to change translation in Translation Editor](/blog/simplelocalize-editor-translate.mp4)

You can use DeepL or Google Translate to [translate texts automatically](/docs/general/auto-translation/).

#### 3. Download translations

When the translations are ready, you can download them in multiple ways. Export translations inside SimpleLocalize or use or CLI and API to get ready to use translation files.

![How to download translation using command-line tool](/docs/cli-download-translations.mp4)

#### 4. Localization hosting

Check also [our translation hosting](/docs/general/translation-hosting/) option
to keep your localization files in the cloud.
Access them easily with superfast CDN and fetch your updated translations anywhere and anytime.


#### See also:
- [i18next: integration guide](/docs/integrations/i18next/)
- [FormatJS: integration guide](/docs/integrations/format-js/)
- [FormatJS CLI: integration guide](/docs/integrations/format-js-cli/)
- [Docs: translation hosting](/docs/general/translation-hosting/)
- [Docs: Getting started with CLI](/docs/cli/get-started/)

👋 Thanks for reading!


Translation Hosting

SimpleLocalize CLI

REST API

Auto-translation

Alternative translations

Nextjs

How to translate NextJS app with next-i18next?

How to translate NextJS app with next-translate?

List of i18n libraries for React, React Native, and NextJS