Frontend Accelerator
Frontend Accelerator
  • Getting Started
    • Welcome
    • Start right now 👉
  • Setup
    • Database
    • Payments
    • Authentication
    • AI
  • Features
    • Dashboard
    • Localization
    • Changelog
    • Rich text editor
    • Lead magnet
    • Checkout button
    • Sign in button
    • Sales countdown banner
    • Capture email button
    • Locale switcher
    • Social icons
  • Extra
    • Theming
    • Support
Powered by GitBook
On this page
  • Locales
  • Locales in URL's
  • Using locales
  • Linking and navigating
  1. Features

Localization

PreviousDashboardNextChangelog

Last updated 3 months ago

Localization (i18n) is implemented using 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/members

  • de will be shown in url -> website.com/de/members

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.

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
Next-intl