Internationalization

This page details how to set up and configure internationalization in the ZTO SaaS Starter Kit. We cover how to add new languages, manage translations.

The project uses i18next for internationalization.

Usage

You should wrap your page with withI18n function to use internationalization.

const Page = () => {
  return <div>Page</div>;
};
 
export default withI18n(Page);

The language files are located in the apps/web/public/locales directory.

Server components

To use internationalization in server components, you need to wrap your components or pages with withI18n:

import { Trans } from '@org/ui';

const Page = () => {
  return <h1><Trans i18nKey="pageHeading" /></h1>;
};
 
export default withI18n(Component);

Client components

To use internationalization in client components, you need to use useTranslation hook in your components:

import { useTranslation } from 'react-i18next';

const Component = () => {
  const { t } = useTranslation();
  return <div>{t('translations')}</div>;
};

Adding new languages

To add a new language, create a new JSON file in the apps/web/public/locales directory. The file name should be the language code (e.g., fr/demo.json).

{
  "pageHeading": "En-tête de page"
}

You can set default language in the i18n.settings.ts file

Language switcher component

You can use the LanguageSelector component to switch between languages:

import { LanguageSelector } from '@kit/ui/language-selector';
 
<LanguageSelector />