i18n
  // load translation using http -> see /public/locales
  // learn more: https://github.com/i18next/i18next-http-backend
  .use(Backend)
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    ns: [
      "translation",
      "header",
      "note",
      "settings",
      "zod",
      "custom",
      "introduce",
      "message",
    ],
    defaultNS: "translation",
    fallbackLng: "en",
    debug: false,
    detection: {
      caches: ["localStorage"],
    },
  });
export default i18n;

import "./i18";

import { useTranslation } from "react-i18next";

const { t } = useTranslation();

<button className="btn border truncate" onClick={handleSignIn}>
  {t("sign-in")}
</button>;

{
  "sign-in": "sign in"
}

t("item", { count: info.count });

{
  "item_one": "item",
  "item_other": "items"
}

const { t } = useTranslation(["note", "message"]);

// default namespace
t("empty-description");
// other namesapces
t("save title successfully", { ns: "message" });

{
  "empty-description": "No notes exists, go write your first note!"
}

{
  "save title successfully": "save title successfully"
}

<Trans i18nKey={"success.description"} seconds={seconds}>
  we will get you in after {{ seconds }}s, or click here dive in right now
</Trans>

{
  "success": {
    "description": "we will get you in after {{seconds}}s, or click button go home right now"
  }
}

// get current language
const currentLng = localStorage.getItem("i18nextLng");

// set current language
const { i18n } = useTranslation();
i18n.changeLanguage(item);