Skip to main content

next-translate

The main goal of next-translate is to keep the translations as simple as possible in a Next.js environment.

superplate serves an optional i18n app translation plugin with next-translate .

The translations of custom text messsages will be stored in each language's own separate folder.

- locales    - en        - common.js        - home.js    - tr        - common.js        - home.js

If you choose next-translate as a i18n plugin during project creation phase, common.json example file will be created at public/locales directory by CLI.

locales/eng/common.json
{  "hello": "Hello",  "greet": "Hello, {{name}}!",  "world": "World",  "language": {    "tr": "🇹🇷 Türkçe",    "en": "🇺🇸 English"  }}
locales/tr/common.json
{  "hello": "Merhaba",  "greet": "Merhaba, {{name}}!",  "world": "Dünya",  "language": {    "tr": "🇹🇷 Türkçe",    "en": "🇺🇸 English"  }}

How to use next-translate?#

import React from "react";import Link from "next/link";
import useTranslation from "next-translate/useTranslation";import i18nConfig from "@i18n";
const { locales } = i18nConfig;
export const NextTranslateExample: React.FC<{ defaultNamespace: string }> = ({    defaultNamespace,}) => {    const { t, lang } = useTranslation(defaultNamespace);
    return (        <div>            ...            <div>                {locales.map(lng => (                    <Link href="/" passHref locale={lng} key={lng}>                        <a>                            {t(`common:language.${lng}`)}                        </a>                    </Link>                ))}            </div>            <main>                <p>{t("common:greet", { name: t`common:world` })}</p>            </main>            ...        </div>    );};

How to configure next-translate?#

caution

All required configurations will be handled automatically by CLI as long as you choose plugins during the project creation phase.

If you didn't choose the plugin during project creation phase, you can follow the instructions below to add it.

 npm install next-translate

You must create the file i18n.json in the main directory.

i18n.json
{    "locales": ["en", "tr"],    "defaultLocale": "en",    "pages": {        "*": ["common"],        "/": ["home"]    }}
note

As in the common.js example above, create a json file in each translation language's own separate folder and define translations with key-value pairs.