
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.1/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.


Translation Hosting

SimpleLocalize CLI

REST API

Auto-translation

Alternative translations

Next i18next

How to translate NextJS app with next-i18next?