Theme Configuration

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.

Receive the latest updates directly in your inbox!

Be the first to know about new updates and exclusive discounts. No spam, just great offers!

How about

A Custom Project?

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 Admin & Dashboards
230+

Total Pages

5+

Layouts

11+

Application

We provide quick support withing one business day to all of our customers.

© Domiex Created & Crafted by SRBThemes.