nextjs-cms

Adding a Translation

Add a new admin UI language to @nextjscms/translations.

Admin UI languages ship in packages/translations as one dictionary per language. English lives in core (packages/nextjs-cms/src/translations/base/en.ts) and defines the complete set of keys.

1. Create the dictionary

Copy the English file and translate the values. Keep the keys, and keep {placeholders} intact:

packages/translations/src/languages/fr.ts
export default {
    adminDoesNotExist: "L'administrateur n'existe pas",
    admins: 'Administrateurs',
    fieldIsRequired: 'Le champ {field} est obligatoire',
    // ...
}

Missing keys fall back to English at runtime, so a partial dictionary is usable, but aim for complete.

2. Export it

packages/translations/package.json
"exports": {
    "./ar": { "types": "./dist/languages/ar.d.ts", "default": "./dist/languages/ar.js" },
    "./fr": { "types": "./dist/languages/fr.d.ts", "default": "./dist/languages/fr.js" }
}

3. Right-to-left languages

If the language is written right-to-left, add its code to RTL_LANGUAGES in packages/nextjs-cms/src/translations/language-utils.ts:

export const RTL_LANGUAGES = new Set<string>(['ar', 'he', 'fa'])

4. Try it in the admin

apps/cms/cms.config.ts
import fr from '@nextjscms/translations/fr'

i18n: {
    supportedLanguages: { en, ar, fr },
    fallbackLanguage: 'en',
}

Switch your admin's language in Settings and walk through the main screens: login, sidebar, list, new/edit forms (including validation errors), admins, and log.

5. Changeset

Terminal
pnpm changeset   # @nextjscms/translations: minor — "Add French admin translation"

Keeping translations in sync

When you add a key to base/en.ts, add it to every language file in the same pull request (use the English text if you can't translate it). The missing-key warning (Translation key not found: ...) in the server log is the tool for spotting gaps.