> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getlaunch.it/llms.txt
> Use this file to discover all available pages before exploring further.

# Internationalization (i18n)

> Add multiple language support to your application using Next.js built-in internationalization features and our pre-configured translation system

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.

```typescript tsx web/appConfig.tsx theme={null}
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.

```plaintext theme={null}
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.

```typescript tsx web/app/[locale]/(protected)/layout.tsx theme={null}
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.

```typescript tsx web/i18n/locales.ts theme={null}
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).

```javascript web/next-sitemap.config.js theme={null}
const locales = ['en', 'de']; // Add the new language code here
```

```javascript web/middleware.ts theme={null}
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](https://next-intl.dev/docs/) for more information.