Starting point

We start with the code in the previous step. It's already set up for the node & browser use.

Code

The complete code to be placed in in src/index.js:

import i18next from "i18next";

const en = {
  translation: {
    hello_world: "hello world",
    nested: {
      key: "This key is was read from nested object",
    },
    great: "Hello {{name}}",
  },
};

i18next
  .init({
    lng: "en", // if you're using a language detector, do not define the lng option
    resources: {
      en,
    },
  })
  .then((t) => {
    console.log(t("hello_world"));
    console.log(t("nested.key"));
    console.log(t("great", { name: "Marcin" }));
  });

Nested keys

It allows us to organize our keys in some logical structure. For example, we could have something like:

{
  "dialogBox": {
    "close": "Close"
    "ok": "OK"
  },
  "error": {
     "notEnoughSpace": "Not enough space"
  }
}

Variable interpolation

The basic feature of any i18n library. It allows us to put placeholders in the translation & set the value in the runtime.

Working application

The code in action:

$ node src/index.js 
hello world
This key is was read from nested object
Hello Marcin

Summary

In this article, we have seen how to use basic translation features from i18next.

How to use basic translation features in i18next