Internationalization (i18n)
Add multiple language support to your application using Next.js built-in internationalization features and our pre-configured translation system
LaunchIt supports multiple languages. It uses the package next-intl
.
The default language is set in the app config. To disable url-based language switching, set NEXT_PUBLIC_ENABLE_LANG_ROUTING
to 0
. You should only disable this if you have a single language.
Adding and using translations
Translations are stored in the web/i18n/messages
directory. Each language has its own folder with translation files.
I would recommend creating a separate file for each component (or group of components) or page to keep the translations organized.
After that, add the file name to the web/i18n/config.ts
file to register the translations.
To use translations in your components, import the useTranslations
hook from next-intl
and use it to access the translations. For server-side rendering, use the getTranslations
function.
This will look for the translation key error.title
in the pricing.json
file in the current language folder.
Adding or modifying languages
- Creating a new folder in the
web/i18n/messages
directory. The folder name should be the language code (e.g.de
for German). - Create your translation files according to the existing structure.
- Add the new language to the
locales
array in theweb/i18n/locales.ts
file.
- Add the new language to
web/middleware.ts
andnext-sitemap.config.js
files. (Unfortunately, the compiler does not allow importing the locales file so we need to define it manually).
The language picker component is per default displayed in the footer component when appConfig.i18n.enableLangRouting
is set to true. Use it via <LanguagePicker />
in your components.
Additional information
Read more about next-intl for more information.