LandingBud uses next-intl (opens in a new tab) for localization. The library is a wrapper around the native NextJS i18n support, providing a more straightforward API to work with.

Essentially, using next-intl we get the following advantages:

• A global locale state, meaning we always know the current locale that the user selected. This is also useful when we work with localized site content in the content folder
• A useTranslations hook to access the translations in our components

Editing existing translations

The project comes with an English and a German locale. English is the default language and will be used as a fallback if a translation is missing in the selected locale.

• Translation string are stored in the locales folder. Each locale has its own JSON file, e.g., en.json and de.json
• Site content is stored in the content folder. Each locale has its own folder, e.g., en and de

Adding or changing a locale

Follow these steps to add a new locale. You can also use these steps to change the existing German locale to another one.

1. Create a new JSON file in the locales folder, e.g., fr.json - copy the content from the en.json file and translate the strings
2. Create a new folder in the content folder, e.g., fr - copy the content from the en folder and translate the markdown files
3. Open src/i18n.ts and add your locale in the locales array
4. Open src/middleware.ts and adapt the matcher inside the config object to include your new locale

export const config = {
  // Match only internationalized pathnames
  matcher: ["/", `/(de|en)/:path*`], // before
  matcher: ["/", `/(de|en|fr)/:path*`], // after
};

5. Make sure that you have a country flag in public/flags for the new locale. Nucleoapp has a great collection of flags that you can use. (opens in a new tab)