DEV Community

Cover image for Internationalization with i18next + react-i18n 🌎
Guimo
Guimo

Posted on • Updated on

Internationalization with i18next + react-i18n 🌎

Hey, this is just a example, on my machine worked!

It's important to know how to deal with multiple kinds of users, and the one of the most important barriers is the language so it's very important that your project has some sort of internationalization.
There are many forms implement Internationalization on you project, but the quickest and easiest i found was with i18next + react-i18n.

How to:

  • Create your project (i use vite):
npm create vite@latest
Enter fullscreen mode Exit fullscreen mode
  • Add i18next + react-i18n to your project
 npm install react-i18next i18next --save
Enter fullscreen mode Exit fullscreen mode
  • Create a folder called lib and create a file called i18n.ts: > should look like this
import i18n from "i18next";
import { initReactI18next } from "react-i18next";

i18n.use(initReactI18next).init({
  resources: {},
  lng: "en", // the default language you want on your project

});
Enter fullscreen mode Exit fullscreen mode
  • Create another folder on src called locale, there you can add your .json files, on this example i created two:
    • en.json for English and pt.json for Portuguese:
    • en.json
{
    "translation":{
        "header": "Our Header",
        "footer": "Our Footer {{year}}"
    }
}
Enter fullscreen mode Exit fullscreen mode
  • pt.json
{
    "translation":{
        "header": "Nosso Cabeçalho",
        "footer": "Nosso Rodape {{year}}"
    }
}
Enter fullscreen mode Exit fullscreen mode

Now go back on your i18n.ts file:

should look like this

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

//Add the translation files
import enTranslations from "../locale/en.json";
import ptTranslations from "../locale/pt.json";

i18n.use(initReactI18next).init({
  resources: {

    en: { ...enTranslations },

    pt: { ...ptTranslations },

  },
  lng: "en",

});
Enter fullscreen mode Exit fullscreen mode

Final Steps!

  • Go on your main.tsx file and import the i18n.ts file:
import "./lib/i18n.ts";
Enter fullscreen mode Exit fullscreen mode

Now we have to make usage of this, let's go on App.tsx

  • Let's add the useTranslation hook:
  const {
    t,
    i18n: { changeLanguage, language },
  } = useTranslation();
Enter fullscreen mode Exit fullscreen mode
  • Create a useState just switch between the languages:

 const [currentLang, setCurrentLang] = useState(language);

  • Create a simple function to switch the languages:
  const switchLang = () => {

    const newLang = currentLang === "en" ? "pt" : "en";

    changeLanguage(newLang);

    setCurrentLang(newLang);
  };
Enter fullscreen mode Exit fullscreen mode
  • Change your App.tsx so we can test our theory!

Should look like this

 return (

    <>

      <h1>{t("header")}</h1>

      <button type="button" onClick={switchLang}>
        Change Language manually
      </button>

      <footer>
        <h1>{t("footer", { year: new Date().getFullYear() })}</h1>
      </footer>

    </>

  );
Enter fullscreen mode Exit fullscreen mode
  • As you can see, to use the translation we have to pass the t from useTranslation with the tokens we created on our .json languages.

Result

On English!
English example

On Portuguese!
Portuguese example

I Hope this could helped you somehow!

How to find me?

Top comments (10)

Collapse
 
niklasbuchfink profile image
Niklas Buchfink

Good article! I can recommend using i18next with the VS code extension and the Fink localization editor from inlang.
@guim0 I would like to hear your thoughts on the i18n library ParaglideJS, which offers type-safety and a more efficient approach to message splitting than i18next.

Disclaimers: I'm working on inlang, but they are free, open-source tools that will ease some i18n-related pain.

Collapse
 
guim0 profile image
Guimo

Thanks @niklasbuchfink! I've never heard about those tools, but I'm pretty sure they can help improve productivity, I'll test those and give you a shout-out!

Collapse
 
niklasbuchfink profile image
Niklas Buchfink

Awesome, thank you @guim0 🫶

Collapse
 
eobattisti profile image
Nicolas Battisti

Great article ! :D

Collapse
 
guim0 profile image
Guimo

Thanks buddy!

Collapse
 
matheuswebp profile image
Matheus Melo

Nice article :)

Collapse
 
williansugiyama profile image
Willian Sugiyama

GOAT!

Collapse
 
guim0 profile image
Guimo

🙇🏽 US!

Collapse
 
felippodev profile image
Luiz Felippo

Amazing article, i really liked the article subject!

Collapse
 
pedrovian4 profile image
pedrovian4

Great article, dude!