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
- 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
- Create a folder called
public/locales
in your project directory. - Inside
locales
, create subfolders for each language (e.g.,en
andhe
).
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;