Add localization in nextjs project
When i am integrating localization in nextjs getting many issues. so can create post for it. I have implement in client side. First you need to create file for language which you want to include. like public/locales/ en.json , ar.json, de.json en.json { "HEADING":"My First Page" } de.json { "HEADING":"Meine erste Seite" } like this you can add language keys. package.json { "name": "translation-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev --turbopack", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "aos": "^2.3.4", "bootstrap": "^5.3.3", "i18next": "^24.2.2", "i18next-browser-languagedetector": "^8.0.4", "i18next-http-backend": "^3.0.2", "next": "15.1.6", "react": "^19.0.0", "react-bootstrap": "^2.10.8", "react-dom": "^19.0.0", "react-i18next": "^15.4.1" }, "devDependencies": { "@eslint/eslintrc": "^3", "@types/node": "22.12.0", "eslint": "^9", "eslint-config-next": "15.1.6", "sass": "^1.85.1", "sass-loader": "^16.0.5", "typescript": "5.7.3" } } Base.tsx import React, { useEffect, useState } from 'react' import Footer from '../footer/page'; import { I18nextProvider, useTranslation } from "react-i18next"; import i18n from "../../../utils/i18n"; const Base = ({children}) => { const { i18n: i18nInstance } = useTranslation(); const [loading, setLoading] = useState(true); useEffect(() => { if (i18nInstance.isInitialized) { setLoading(false); } }, [i18nInstance.isInitialized]); if (loading) { return ( ); } return ( {children} ) } export default Base; i18n.ts "use client"; import i18n from "i18next"; import { initReactI18next } from "react-i18next"; import HttpApi from "i18next-http-backend"; import LanguageDetector from "i18next-browser-languagedetector"; if (typeof window !== "undefined") { i18n .use(HttpApi) // Load translations dynamically .use(LanguageDetector) .use(initReactI18next) .init({ supportedLngs: ["en", "ar"], fallbackLng: "en", debug: false, // Set false in production detection: { order: ["localStorage", "cookie", "navigator"], caches: ["localStorage"] }, backend: { loadPath: "/locales/{{lng}}.json" }, interpolation: { escapeValue: false } }); } export default i18n; In this file i have show that how you can change language & use it. Footer.tsx "use client"; import React, { useEffect } from 'react'; import Link from 'next/link'; import './style.scss'; import { PolicyMenu, SocialMenu } from "../../../constant/const"; import { useTranslation } from 'react-i18next'; export default function Footer() { const { t, i18n } = useTranslation(); const change = (lang) => { if (i18n?.language == lang) return; i18n?.changeLanguage(lang); } return ( {t("SITE_BY")} {SocialMenu.map((item, index) => ( {item.icon} ))} {PolicyMenu.map((value, index) => ( {t(value.name)} )) } change('en')}>EN change('ar')}>AR ) }
When i am integrating localization in nextjs getting many issues. so can create post for it. I have implement in client side.
First you need to create file for language which you want to include.
like
public/locales/
en.json , ar.json, de.json
en.json
{
"HEADING":"My First Page"
}
de.json
{
"HEADING":"Meine erste Seite"
}
like this you can add language keys.
package.json
{
"name": "translation-project",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"aos": "^2.3.4",
"bootstrap": "^5.3.3",
"i18next": "^24.2.2",
"i18next-browser-languagedetector": "^8.0.4",
"i18next-http-backend": "^3.0.2",
"next": "15.1.6",
"react": "^19.0.0",
"react-bootstrap": "^2.10.8",
"react-dom": "^19.0.0",
"react-i18next": "^15.4.1"
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"@types/node": "22.12.0",
"eslint": "^9",
"eslint-config-next": "15.1.6",
"sass": "^1.85.1",
"sass-loader": "^16.0.5",
"typescript": "5.7.3"
}
}
Base.tsx
import React, { useEffect, useState } from 'react'
import Footer from '../footer/page';
import { I18nextProvider, useTranslation } from "react-i18next";
import i18n from "../../../utils/i18n";
const Base = ({children}) => {
const { i18n: i18nInstance } = useTranslation();
const [loading, setLoading] = useState(true);
useEffect(() => {
if (i18nInstance.isInitialized) {
setLoading(false);
}
}, [i18nInstance.isInitialized]);
if (loading) {
return (
);
}
return (
{children}
)
}
export default Base;
i18n.ts
"use client";
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import HttpApi from "i18next-http-backend";
import LanguageDetector from "i18next-browser-languagedetector";
if (typeof window !== "undefined") {
i18n
.use(HttpApi) // Load translations dynamically
.use(LanguageDetector)
.use(initReactI18next)
.init({
supportedLngs: ["en", "ar"],
fallbackLng: "en",
debug: false, // Set false in production
detection: {
order: ["localStorage", "cookie", "navigator"],
caches: ["localStorage"]
},
backend: {
loadPath: "/locales/{{lng}}.json"
},
interpolation: {
escapeValue: false
}
});
}
export default i18n;
In this file i have show that how you can change language & use it.
Footer.tsx
"use client";
import React, { useEffect } from 'react';
import Link from 'next/link';
import './style.scss';
import { PolicyMenu, SocialMenu } from "../../../constant/const";
import { useTranslation } from 'react-i18next';
export default function Footer() {
const { t, i18n } = useTranslation();
const change = (lang) => {
if (i18n?.language == lang) return;
i18n?.changeLanguage(lang);
}
return (
{t("SITE_BY")}
{SocialMenu.map((item, index) => (
- {item.icon}
))}
{PolicyMenu.map((value, index) => (
- {t(value.name)}
))
}
change('en')}>EN
change('ar')}>AR
)
}
