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.