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

# Internationalization

> Manage translations and locales with the Zopio CLI

# Internationalization

The Zopio CLI provides robust tools for managing translations and locales in your `zopio` application. This page covers how to use the CLI to add, update, and manage translations.

## Directory Structure

The Zopio framework uses both `next-international` and `next-intl` for internationalization, which requires translations to be stored in two locations:

```
├─ locales/
│  ├─ en/
│  │  └─ common.json
│  └─ tr/
│     └─ common.json
├─ dictionaries/
│  ├─ en/
│  │  └─ common.json
│  └─ tr/
│     └─ common.json
├─ i18nConfig.ts
└─ languine.json
```

## i18n Command

The `i18n` command helps you manage translations and locales in your `zopio` application.

```bash theme={"system"}
zopio i18n [options]
```

### Options

* `--add <locale>` - Add a new locale
* `--remove <locale>` - Remove a locale
* `--extract` - Extract translation keys from source files
* `--sync` - Synchronize translation files across locales
* `--check` - Check for missing translations
* `--default <locale>` - Set the default locale

### Examples

<CodeGroup>
  ```bash add locale theme={"system"}
  zopio i18n --add tr
  ```

  ```bash extract keys theme={"system"}
  zopio i18n --extract
  ```

  ```bash sync translations theme={"system"}
  zopio zopio i18n --sync
  ```
</CodeGroup>

## Supported Locales

The Zopio CLI supports the following locales out of the box:

* `en` - English (default)
* `tr` - Turkish
* `es` - Spanish
* `de` - German

You can add support for additional locales using the `i18n --add` command.

## Configuration

The internationalization system is configured through two files:

### i18nConfig.ts

```typescript theme={"system"}
// i18nConfig.ts
export const i18nConfig = {
  defaultLocale: 'en',
  locales: ['en', 'tr', 'es', 'de'],
  localeDetection: true,
  localePrefix: 'always'
};
```

### languine.json

```json theme={"system"}
// languine.json
{
  "defaultLocale": "en",
  "supportedLocales": ["en", "tr", "es", "de"],
  "fallbackLocale": "en",
  "namespaces": ["common", "auth", "dashboard"],
  "translationDirs": [
    "dictionaries",
    "locales"
  ]
}
```

## Using Translations in Components

The Zopio CLI generates components with internationalization support built-in:

<Tabs>
  <TabItem value="server" label="Server Component">
    ```tsx theme={"system"}
    // app/[locale]/page.tsx
    import { getTranslations } from 'next-intl/server';

    export default async function Page({ params }) {
      const t = await getTranslations('common');
      
      return (
        <div>
          <h1>{t('welcome')}</h1>
          <p>{t('description')}</p>
        </div>
      );
    }
    ```
  </TabItem>

  <TabItem value="client" label="Client Component">
    ```tsx theme={"system"}
    // components/Header.tsx
    'use client';

    import { useTranslations } from 'next-intl';

    export function Header() {
      const t = useTranslations('common');
      
      return (
        <header>
          <h1>{t('title')}</h1>
          <nav>
            <a href="/">{t('nav.home')}</a>
            <a href="/about">{t('nav.about')}</a>
          </nav>
        </header>
      );
    }
    ```
  </TabItem>
</Tabs>

## Translation Management

The Zopio CLI provides several commands to help you manage translations:

### Extract Translation Keys

```bash theme={"system"}
zopio i18n --extract
```

This command scans your source files for translation keys and adds them to your translation files.

### Synchronize Translations

```bash theme={"system"}
zopio i18n --sync
```

This command ensures that all translation files have the same keys across all locales.

### Check for Missing Translations

```bash theme={"system"}
zopio i18n --check
```

This command identifies missing translations in your locale files.

<Alert type="info">
  The Zopio CLI automatically updates translation files when you generate new components or modules with the <code>generate</code> command.
</Alert>