Skip to main content

​
Internationalization Command

The i18n command helps you manage internationalization (i18n) for your zopio project. This command provides tools for creating, updating, and managing translations across multiple languages.

​
Usage

zopio i18n [options]

​
Options

OptionDescription
-i, --initInitialize internationalization for your project
-a, --add <locale>Add a new locale to your project
-e, --extractExtract translation keys from source files
-s, --syncSynchronize translation files across all locales
-c, --checkCheck for missing translations
-h, --helpDisplay help for command

​
Examples

​
Initialize internationalization

zopio i18n --init
This creates the initial configuration and directory structure for internationalization: 
project/
├── dictionaries/
│   └── en.json
├── locales/
│   └── en/
│       └── common.json
├── i18nConfig.ts
└── languine.json

​
Add a new locale

zopio i18n --add tr
This adds support for Turkish language to your project: 
project/
├── dictionaries/
│   ├── en.json
│   └── tr.json
├── locales/
│   ├── en/
│   │   └── common.json
│   └── tr/
│       └── common.json
├── i18nConfig.ts
└── languine.json

​
Extract translation keys

zopio i18n --extract
This scans your source files for translation keys and adds them to your translation files.

​
Synchronize translation files

zopio i18n --sync
This ensures all locales have the same keys, copying missing keys from the default locale.

​
Configuration

The internationalization system in zopio uses the following configuration files:

​
i18nConfig.ts

export const i18nConfig = {
  defaultLocale: 'en',
  locales: ['en', 'tr', 'es', 'de'],
  localeCookieName: 'NEXT_LOCALE',
  localeDetection: true
};

​
languine.json

{
  "sourceLocale": "en",
  "locales": ["en", "tr", "es", "de"],
  "catalogs": [
    {
      "path": "dictionaries/{locale}.json",
      "include": ["**/*.{js,jsx,ts,tsx}"],
      "exclude": ["**/node_modules/**"]
    }
  ],
  "format": "minimal"
}

​
Integration with Next.js

zopio uses next-international for middleware and next-intl for client-side translations. Here’s how to use translations in your components:

​
Server Components

import { getTranslations } from 'next-intl/server';

export async function MyServerComponent() {
  const t = await getTranslations('Common');
  
  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
    </div>
  );
}

​
Client Components

'use client';

import { useTranslations } from 'next-intl';

export function MyClientComponent() {
  const t = useTranslations('Common');
  
  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
    </div>
  );
}
  • i18n-analyze - Analyze translation coverage across locales (plugin command)