Translations¶

For managing the translations, we use i18n library with the Next.js integration package next-translate.

All available translations can be found under /project-base/storefront/public/locales.

Add new translation¶

Wherever you want to use translated string, you first need to import the useTranslation hook from next-translate(if you are inside a component) or getT if you are in a server-side function, such as getServerSideProps.

import useTranslation from 'next-translate/useTranslation';

then you are able to use it in a component/hook

const TranslatedStringComponent: FC = () => {
    const { t } = useTranslation();

    return <div>{t('translated')}</div>;
};

After you put t('translated') in the code, the translation parser is able to find the string and generate translations for other languages. Now run

pnpm translate

This will generate a new translation key (in our case key translated) in every language file /project-base/storefront/public/locales/{language_code}/common.json.

Now, you can open each language file and fill in the proper translation strings for the new key pair. The parsing is done using i18next-parser.