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

To add a new locale to prompts.chat, register the language code in prompts.config.ts, create a JSON translation file in the messages/ directory, and ensure the language selector in 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. Open this file and add your new locale code to the i18n.locales array.

// 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 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) and rename it to match your new locale code (for example, it.json for Italian). Translate every string value while preserving the exact key structure to maintain type safety and prevent runtime errors.

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

Commit this new file under 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. 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:

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:

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 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 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, 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.

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 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 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.

How does prompts.chat handle fallback locales?

The application defines a defaultLocale (typically "en") in 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}