How to make multi language project in next js in 10 minutes

Create a Next.js app

To create a Next.js app, open your terminal, cd into the directory you’d like to create the app in, and run the following command:

npx create-next-app@latest nextjs-blog

install npm  i18n

npm i i18n

Configure next-i18next

1. In your Next.js root directory, create a file called next-i18next.config.js. This will hold your i18n configuration.

// next-i18next.config.js
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'he'], // Add languages here, like English ('en') and Hebrew ('he')
  },
};

2. In your next.config.js file, import the i18n configuration and pass it into Next.js:

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

module.exports = {
  i18n,
  async redirects() {
    return [
      {
        source: "/",
        destination: "/home",
        permanent: true,
      },
    ];
  },
};

Create i18n.js file in root

In your Next.js root directory, create a file called i18n.js. This will hold your i18n configuration.

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import translationEN from "./public/locales/en/translation.json";
import translationHe from "./public/locales/he/translation.json";

const resources = {
  en: {
    translation: translationEN,
  },
  he: {
    translation: translationHe,
  },
};

i18n.use(initReactI18next).init({
  resources,
  fallbackLng: "en", // Fallback to English if language is not detected
  load: "languageOnly", // Use only the language code, ignoring the region
  detection: {
    order: [
      "navigator",
      "localStorage",
      "cookie",
      "htmlTag",
      "path",
      "subdomain",
    ],
    caches: ["localStorage", "cookie"],
    lookupCookie: "i18next", // Ensure cookie storage
    lookupLocalStorage: "i18nextLng", // Ensure localStorage storage
    checkWhitelist: true, // Ensures only whitelisted languages are used
    lookupFromPathIndex: 0,
    lookupFromSubdomainIndex: 0,
  },
  whitelist: ["en", "he"], // Specify the languages you want to support
  nonExplicitWhitelist: true, // Ignore region code (e.g., en-US will fallback to en)
  interpolation: {
    escapeValue: false, // React already does escaping
  },
});

export default i18n;

 

Add Translations

1. Create a folder called public/locales in your project directory.
2. Inside locales, create subfolders for each language (e.g., en and he).

public/
└── locales/
    ├── en/
    │   └── translation.json
    └── he/
        └── translation.json

In each language folder, create a common.json file for translations. For example:

{
"contact": "Contact Us",
"welcome": "Welcome"
}

public/locales/he/common.json:

{
  "contact": "צרו קשר",
  "welcome": "ברוכים הבאים"
}

make a Language Switching component

import { useTranslation } from "react-i18next";
import i18n from "../../i18n";
function LanguageSwitcher() {
  const { i18n } = useTranslation();

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div className="changeLanguage">
      {i18n.language === "en" ? (
        <>
          <button onClick={() => changeLanguage("he")}>
            <span> HE</span>
          </button>
        </>
      ) : (
        <>
          <button onClick={() => changeLanguage("en")}>
            <span> EN</span>{" "}
          </button>
        </>
      )}
    </div>
  );
}

export default LanguageSwitcher;

 

Now Use Translations in Home page

// components/Home.js
import { useTranslation } from 'react-i18next';

const Home = () => {
  const { t } = useTranslation('common'); // 'common' refers to the common.json file
  
  return (
    <main>
      
      <button>{t('contact')}</button> 
    </main>
  );
};

export default Home;