Internationalization (i18n)

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.

i18n: {
  enableLangRouting: true,
  defaultLocale: 'en',
}

​

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.

web/i18n/messages
├── de
│   ├── pricing.json
│   ├── ...
├── en
│   ├── pricing.json
│   ├── ...

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.

import { useTranslations } from 'next-intl';

export default function Pricing({...}: Props) {
    const t = useTranslations('pricing');
    return (
        ...
        <h4>{t('error.title')}</h4>
    );

This will look for the translation key error.title in the pricing.json file in the current language folder.

​

Adding or modifying languages

1. Creating a new folder in the web/i18n/messages directory. The folder name should be the language code (e.g. de for German).
2. Create your translation files according to the existing structure.
3. Add the new language to the locales array in the web/i18n/locales.ts file.

export const locales = [
  {
    locale: 'en',
    name: 'English',
    flag: 'us', // ISO 3166-1 alpha-2 code
  },
  {
    locale: 'de',
    name: 'Deutsch',
    flag: 'de',
  },
] as const;

4. Add the new language to 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).

const locales = ['en', 'de']; // Add the new language code here

export const config = {
  matcher: [
    '/',
    `/(de|en)/:path*`, // and here
  ],
};

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.