# Adding New Locales and Creating Translation Files for the i18n System in prompts.chat

> Learn how to add new locales and create translation files for the i18n system in prompts.chat. Follow our guide to easily expand your app's language support.

- Repository: [Fatih Kadir Akın/prompts.chat](https://github.com/f/prompts.chat)
- Tags: how-to-guide
- Published: 2026-04-02

---

**To add a new locale to prompts.chat, register the language code in [`prompts.config.ts`](https://github.com/f/prompts.chat/blob/main/prompts.config.ts), create a JSON translation file in the `messages/` directory, and ensure the language selector in [`src/components/layout/header.tsx`](https://github.com/f/prompts.chat/blob/main/src/components/layout/header.tsx) includes the new option.**

Adding new locales and creating translation files for the i18n system in prompts.chat requires coordinated updates across the configuration file, translation bundles, and UI components. The application uses **next-intl** to manage internationalization, consuming a central config and JSON message bundles to render localized content.

## Step 1: Register the Locale in prompts.config.ts

All supported locales are declared centrally in **[`prompts.config.ts`](https://github.com/f/prompts.chat/blob/main/prompts.config.ts)**. Open this file and add your new locale code to the `i18n.locales` array.

```typescript
// prompts.config.ts
export const config = {
  i18n: {
    locales: ["en", "es", "fr", "de", "it"], // Added "it" for Italian
    defaultLocale: "en",
  },
};

```

The Next.js root layout at **[`src/app/layout.tsx`](https://github.com/f/prompts.chat/blob/main/src/app/layout.tsx)** consumes this configuration to initialize the `NextIntlProvider`, making the new locale available to the application immediately after registration.

## Step 2: Create a JSON Translation File in the messages Directory

Duplicate an existing translation file in **`messages/`** (such as [`en.json`](https://github.com/f/prompts.chat/blob/main/en.json)) and rename it to match your new locale code (for example, [`it.json`](https://github.com/f/prompts.chat/blob/main/it.json) for Italian). Translate every string value while **preserving the exact key structure** to maintain type safety and prevent runtime errors.

```json
{
  "common": {
    "appName": "Prompts.Chat",
    "loading": "Caricamento…"
  },
  "header": {
    "home": "Home",
    "discover": "Scopri",
    "profile": "Profilo"
  }
}

```

Commit this new file under **[`messages/it.json`](https://github.com/f/prompts.chat/blob/main/messages/it.json)**. The file must contain valid JSON with namespaces matching those used throughout the UI (such as `common`, `header`, and any feature-specific keys).

## Step 3: Update the Language Selector in header.tsx

The language switcher resides in **[`src/components/layout/header.tsx`](https://github.com/f/prompts.chat/blob/main/src/components/layout/header.tsx)**. If the component iterates over `config.i18n.locales` dynamically, the new locale appears automatically. If the selector uses a hard-coded list, manually extend the array:

```tsx
const locales = [
  { code: "en", label: "English" },
  { code: "es", label: "Español" },
  { code: "it", label: "Italiano" }, // New entry
];

```

Once added, users can switch to the new language via the header dropdown, and next-intl will automatically load the corresponding JSON file from the `messages/` directory.

## Verifying the Integration

Run the development server to confirm the integration works correctly:

```bash
npm run dev

```

Navigate to the application and select the new language from the header. The UI should render translated strings immediately. If strings appear missing, verify that all required namespaces exist in your new JSON file and match the keys defined in the default locale.

## Summary

- **Register** new locales in [`prompts.config.ts`](https://github.com/f/prompts.chat/blob/main/prompts.config.ts) by adding the language code to the `i18n.locales` array.
- **Create** a translation file in `messages/{locale}.json` by copying an existing locale and translating all string values while preserving keys.
- **Update** the language selector in [`src/components/layout/header.tsx`](https://github.com/f/prompts.chat/blob/main/src/components/layout/header.tsx) to expose the new option to users.
- **Test** locally with `npm run dev` to ensure next-intl loads the translations correctly.

## Frequently Asked Questions

### Where are translation files stored in prompts.chat?

Translation files live in the **`messages/`** directory at the repository root, with one JSON file per locale (e.g., [`en.json`](https://github.com/f/prompts.chat/blob/main/en.json), [`es.json`](https://github.com/f/prompts.chat/blob/main/es.json)). According to the prompts.chat source code, next-intl loads these files automatically based on the active locale configured in [`prompts.config.ts`](https://github.com/f/prompts.chat/blob/main/prompts.config.ts).

### What format should translation files follow?

Translation files must be valid JSON objects containing nested namespaces (such as `common`, `header`, etc.) with string values. When adding new locales, preserve the exact key structure from the default [`en.json`](https://github.com/f/prompts.chat/blob/main/en.json) file to ensure type safety and prevent missing translation errors.

### Do I need to restart the development server after adding a new locale?

No. After updating [`prompts.config.ts`](https://github.com/f/prompts.chat/blob/main/prompts.config.ts) and creating the new JSON file in `messages/`, next-intl will hot-reload the translations automatically when running `npm run dev`. However, you must refresh the browser to see UI changes if you modified the hard-coded language selector array in [`src/components/layout/header.tsx`](https://github.com/f/prompts.chat/blob/main/src/components/layout/header.tsx).

### How does prompts.chat handle fallback locales?

The application defines a `defaultLocale` (typically `"en"`) in [`prompts.config.ts`](https://github.com/f/prompts.chat/blob/main/prompts.config.ts). If a translation key is missing in the selected locale, next-intl falls back to the default locale's strings, ensuring the UI never renders blank content.