Add multiple language support to your application using Next.js built-in internationalization features and our pre-configured translation system
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.
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.
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.
error.title
in the pricing.json
file in the current language folder.
web/i18n/messages
directory. The folder name should be the language code (e.g. de
for German).locales
array in the web/i18n/locales.ts
file.web/middleware.ts
and next-sitemap.config.js
files. (Unfortunately, the compiler does not allow importing the locales file so we need to define it manually).appConfig.i18n.enableLangRouting
is set to true. Use it via <LanguagePicker />
in your components.