How to add i18next with JSON files to Next.js project with app router

Introduction

One of the best things about using i18next for localization is its wide-ranging support. It works with almost every framework or platform you can imagine. This post will walk through how to set up i18next (with JSON translation files) for a Next.js project with app routing.

1. Install i18next and related packages

First, you need to install i18next and some helper packages. For example, we'll also install a package to load JSON files and another to detect the language of the user's browser. You can do this by running the following command in your terminal:

npm install i18next react-i18next i18next-http-backend i18next-browser-languagedetector

2. Create a new folder

Next, create a new folder in your project's public directory called locales. This is where your JSON translation files will live.

3. Create source translation file

Inside the locales folder, create a new folder called en. This folder will contain your English source translation. Inside that folder create a translation.json file. Here's an example of what it might look like:

{
  "hello": "Hello, world!",
  "welcome": "Welcome to i18next!"
}

4. Initialize i18next

In your Next.js project, you'll need to initialize i18next and load your translation files. In the root directory of your project, create a i18n.js file. Then, add the following code:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import Backend from "i18next-http-backend";
import LanguageDetector from "i18next-browser-languagedetector";

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: "en",
    load: "languageOnly",
    react: {
      useSuspense: false,
    },
    interpolation: {
      escapeValue: false,
    },
    detection: {
      order: ["querystring", "localStorage", "navigator", "cookie"],
      caches: ["localStorage", "cookie"],
      lookupQuerystring: "lng",
      lookupLocalStorage: "i18nextLng",
    },
    backend: {
      loadPath: "/locales/{{lng}}/{{ns}}.json",
    },
  });

export default i18n;

5. Use i18next in your components

Finally, you can use i18next in your components to display translations. Here's an example of how you might do this in a Next.js component:

"use client";

import { useTranslation } from "react-i18next";
import "@/i18n";

export default function Home() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t("hello")}</h1>
      <p>{t("welcome")}</p>
    </div>
  );
}

6. Use i18nowAI to translate to other languages

If you want to translate your app to other languages, you can use i18nowAI to do it quickly and easily. Simply upload your source translation file, select the languages you want to translate to, and let i18nowAI do the rest. It's that simple! You can get started at www.i18now.ai.

Conclusion

And that's it! You've successfully set up i18next with JSON translation files in your Next.js project with app routing. Now you can easily localize your app and provide translations for different languages. To view example code and learn more, visit our GitHub repository.