Localization

Localization (i18n) is implemented using Next-intl library. Out of the box en
and de
are implemented as examples, together with <LocaleSwitcher>
component.
Locales
Locales can be set and configured in the i18n/config.ts
file.
Locales in URL's
Currently default locale is hidden from url, only any additional locales will be visible in the url.
en
will not be shown in url -> website.com/membersde
will be shown in url -> website.com/de/members
Showing default locale in the URL can be controlled through i18n/routing.ts
file with option of localePrefix
set to always
or as-needed
. Additionally, you will need to comment out rewriting in middleware.ts
. Then your default locale will be shown in the url.
For more info and options check the official documentation: https://next-intl.dev/docs/getting-started/app-router/with-i18n-routing
Using locales
You define translations inside i18n/messages
. Afterwards you can access them through a hook useTranslations(<namespace>)
. See example on the "Homepage" when running the app.
Linking and navigating
To ensure proper navigation remember to use <Link>
component from i18n/routing
rather then the next/link
.
Last updated