---
title: Internationalization
description: How to add multiple languages to your application.
product: Internationalization
type: guide
summary: How to add multiple languages to your application.
---

# Internationalization



kreogen includes a powerful internationalization package that enables you to add multiple language support to your application with minimal configuration. The package handles language detection, routing, and content management through a dictionary-based approach.

## How it works

The internationalization system is built on [Next.js Internationalization](https://nextjs.org/docs/app/building-your-application/routing/internationalization)'s routing system and [Languine](https://languine.ai)'s translation system.

It's configured by default for the `web` package to:

1. Detect the user's preferred language through browser headers
2. Route users to language-specific paths (e.g., `/en/about`, `/fr/about`)
3. Serve content from language-specific dictionaries

The package handles language detection and matching, ensuring users see content in their preferred language when available.

## Setup

To enable automatic translations, simply create a `.env` file in the `internationalization` package and set the `LANGUINE_PROJECT_ID` environment variable.

```txt title=".env"
LANGUINE_PROJECT_ID="your-project-id"
```

## Configuration

The internationalization package is configured through a `languine.json` file that defines:

* Source locale (e.g., `en`)
* Target locales (e.g., `["es", "de"]`)
* Dictionary file locations

## Dictionary Structure

Dictionaries are TypeScript files that export strongly-typed content for each supported language. The type system ensures consistency across translations:

```ts title="packages/internationalization/dictionaries/[locale].ts"
import type { Dictionary } from '@kreogen/internationalization';

const dictionary: Dictionary = {};

export default dictionary;
```

There is no need to create a dictionary for any non-source locale, as [Languine](https://languine.ai) will automatically generate the translations for you.

## Usage

### Translating

To translate your application, you can run the following command:

```bash title="Terminal"
bun run translate
```

This will translate all of the content in your application and save the translations to the `dictionaries` folder.

#### The lock file decides what gets retranslated

`packages/internationalization/languine.lock` records one MD5 of each source
string in `dictionaries/en.json`. A key whose hash still matches is left alone;
a key that is missing or whose hash has moved is retranslated and **the existing
translation for it is overwritten**.

That makes the lock the thing to keep current whenever a translation is written
by hand rather than by `bun run translate` — kreogen's own five target
dictionaries are hand-written, because the template is developed without a
Languine credential. The lock covers every source key, so a translate run in a
project that has one is a no-op until the English copy actually changes, and a
hand translation is never silently replaced.

If you edit `en.json` and do not run `translate`, leave the lock alone: the
stale hash is exactly the signal that says the other locales are behind.

### Frontend

To use the internationalization package, you need to:

1. Maintain a dictionary for your source locale.
2. Import the dictionary into your application.
3. Use the dictionary to render content.

You can find an example of a dictionary in the `web` package:

```tsx title="apps/web/app/page.tsx"
import { getDictionary } from '@kreogen/internationalization';

type HomeProps = {
  params: Promise<{
    locale: string;
  }>;
};

const Home = async ({ params }: HomeProps) => {
  const { locale } = await params;
  const dictionary = await getDictionary(locale);

  // ...
};
```

You can change the locale of the application by changing the `locale` parameter in the URL. For example, `https://example.com/en/about` will render the `about` page in English.

We've already configured the `web` package with a language switcher, so you don't need to worry about it.

### Middleware

The internationalization package also includes a middleware component that automatically detects the user's language and routes them to the appropriate language-specific page.

This has already been configured for the `web` package, so you don't need to worry about it.

```tsx title="apps/web/proxy.ts"
import { createNEMO } from '@rescale/nemo';
import { internationalizationMiddleware } from '@kreogen/internationalization';

// The i18n middleware is composed into the middleware chain
// alongside auth and security middleware using createNEMO:
const composed = createNEMO([...], {
  before: [internationalizationMiddleware],
});
```


---

For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)

For an index of all available documentation, see [/llms.txt](/llms.txt)