Skip to main content

Translate your site

Let's translate cella to Spanish.

Configure i18n​

Modify i18n.json to add support for the es locale:

i18n.json
{
  "locales": ["en-US", "fr", 'es'], // add 'es' to locale
  "defaultLocale": "en-US",
  "pages": {
    "*": ["common", "menu", "actions", "forms", "messages"]
  }
}

Create your namespaces files​

tip

Every folder in locales must have the same files names and numbers, each files are called namespaces. For example common.json file should be in fr, es and en folders.

By default the namespaces are specified on the /locales root directory in this way:

.
├── fr
│   ├── common.json
│   └── menu.json
├── en
│   ├── common.json
│   └── menu.json
└── es
    ├── common.json
    └── menu.json

Each filename matches the namespace specified on the pages config property, while each file content should be similar to this:

en/common.json
{
  "account": "Account",
  "add-a": "Add a {{name}}"
}
es/common.json
{
  "account": "Cuenta",
  "add-a": "Añadir un {{name}}"
}
caution

In namespaces files, only the value changes not the key.

Create a es folder in locales folder. Then make a copy of all namespaces :

info

All of those 4 namespaces are written with dash like so : error-message

  • common.json, as the name suggest, it will store all common expressions.
  • actions.json, describe all of possibles actions.
  • messages.json, store all error, success or others type messages that will be shown to the user.
  • menu.json

d.json namespace describe all data that can be fetch from API. All variables are written with camelCase format like they are written in graphQL queries or mutation. Ex : additionnalDescription

  • d.json

Access in UI​

You need to add your new namespace to isoLang variables in utils/constant.ts. That makes your namespace available to the end user for switching language.

Use translations in your pages​

import useTranslation from "next-translate/useTranslation";

export default function ExamplePage() {
  const { t } = useTranslation("common");
  const add = t("actions:add-a", { name: "Username" }); // get a translation from actions namespaces

  return (
    <div>
      {t("account")}
      {example}
    </div> // <div>add a Username</div>
  );
}

Go to Next-Translate to view more use cases.