In Next.js, you can implement internationalization using libraries like next-i18next. This library integrates seamlessly with Next.js to provide an easy way to manage translations. Below is a quick guide on how to set it up and change the language.
src/utils/i18n.ts
In the i18n.ts file, we set up the i18next configuration. This includes importing required packages, initializing the language resources, and configuring language detection.
import i18n from "i18next"; import detector from "i18next-browser-languagedetector"; import { initReactI18next } from "react-i18next"; import translationEn from "@src/json/lang/en.json"; import translationEs from "@src/json/lang/es.json"; import translationFr from "@src/json/lang/fr.json"; const resources = { en: { translation: translationEn }, es: { translation: translationEs }, fr: { translation: translationFr }, }; i18n .use(detector) .use(initReactI18next) .init({ resources, fallbackLng: "en", keySeparator: false, interpolation: { escapeValue: false, }, }); export default i18n;
_app.tsx
In the _app.tsx file, we wrap our main application component with the appWithTranslation function from next-i18next to provide translation capabilities throughout the app.
import { appWithTranslation } from 'next-i18next'; export default appWithTranslation(App);
src/json/lang/ar.json
Each language has its own JSON file containing key-value pairs for translations. For example, the English translation file (en.json) contains:
{ "pe-dashboards": "Dashboards", ... }
The corresponding translations for Spanish (es.json) and Arabic (ar.json) would look like this:
{ "pe-dashboards": "Paneles de control" }
src/layout/topbar.tsx
import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { changeLayoutLanguage } from '@src/slices/thunk'; import i18n from '@src/utils/i18n'; const LanguageDropdown = () => { const dispatch = useDispatch(); const { layoutLanguages } = useSelector((state) => state.Layout); const changeLanguage = (lng) => { ....; }; return ( <Dropdown> <DropdownButton> <Image src={getCountryFlag(layoutLanguages)} alt="" /> </DropdownButton> <DropdownMenu> ..... </Dropdown> ); }
src/data/sidebar/menu.ts
The Menu.ts file contains all the JSON data for the sidebar navigation, organizing the structure and items displayed in the sidebar of the application.
{ separator: true, title: "Dashboards", lang: "pe-dashboards", children: [] }
src/data/sidebar/menu.ts
{ const { t } = useTranslation(); <span>{t(item.lang)}</span> }
This guide covers everything you need to know to make sure Tailwind generates all of the CSS needed for your project.
Be the first to know about new updates and exclusive discounts. No spam, just great offers!
How about
With over 7 years of experienced team, we specialize in delivering custom projects for startups, blue-chip companies, and government agencies. We have successfully completed over 250+ projects, providing tailored solutions that meet the unique needs of each client.
Hire Us© Domiex Created & Crafted by SRBThemes.