Most strings in the Makerkit template's application use i18next
, a
library to translate your application into multiple languages. Thanks to
this library, we can store all the application's text in json
files for each supported language.
For example, if you are serving your application in English and Spanish, you'd have the following files:
- English translation files at
/public/locales/en/{file}.json
- Spanish translation files at
/public/locales/es/{file}.json
There are valid reasons to use translation files, even if you are not planning on translating your application, such as:
- it's easier to search and replace text
- tidier render functions
- easy update path if you do decide to support a new language
Adding new languages
By default, Makerkit uses English for translating the website's text. All the files are stored in the files at /public/locales/en
.
Adding a new language is very simple:
- Translation Files: First, we need to create a new folder, such as
/public/locales/es
, and then copy over the files from the English version and start translating files. - Next.js i18n config: We need to also add a new language to the Next.js i18n
configuration at
src/i18n/i18next.settings.ts
.
Simply add your new language's code to the locales
array.
The configuration will look like the below:
const fallbackLng = process.env.DEFAULT_LOCALE ?? 'en';
const languages: string[] = [fallbackLng, 'es', 'fr', 'it'];
Setting the default Locale
To set the default locale, simply update the environment variable DEFAULT_LOCALE
stored in .env
.
So, open the .env
file, and update the variable:
DEFAULT_LOCALE=de
Translating Server Components strings
To translate the server components strings, you need to initialize i18n in your Server Component using the following function:
const i18n = await initializeServerI18n(getLanguageCookie());
You can find examples of how we do it in every layout
file.
Translating Client Components strings
When translating client components, you need to ensure you:
- Import the
i18nProvider
component and set the language provided from the server component - Use the
Trans
component from~/core/ui/Trans
. An eslint rule will ensure you do not import it fromreact-i18next
For example, here is the SiteLayout
layout:
function SiteLayout(props: React.PropsWithChildren) {
const data = use(loadUserData());
return (
<I18nProvider lang={data.language}>
<AuthChangeListener accessToken={data.accessToken}>
<SiteHeaderSessionProvider data={data} />
{props.children}
<Footer />
</AuthChangeListener>
</I18nProvider>
);
}