//[doc-seo]
{
    "Description": "Learn how localization works in ABP React UI applications with i18next and ABP application configuration."
}

Localization

ABP React UI templates use i18next with react-i18next. The generated app includes local JSON resources and integrates with ABP application configuration through the @volo/abp-app-config packages.

Localization Files

The main React app stores client-side translations under src/locales/.

src/
├── locales/
│   └── en.json
└── lib/
    └── i18n/
        └── i18n.ts

The default i18n.ts imports the English resource and registers it:

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import en from '@/locales/en.json'

i18n.use(initReactI18next).init({
  resources: {
    en: { translation: en },
  },
  lng: 'en',
  fallbackLng: 'en',
  keySeparator: false,
  nsSeparator: false,
  interpolation: {
    escapeValue: false,
  },
})

keySeparator and nsSeparator are disabled so ABP-style keys such as AbpIdentity::Users and Menu:Home can be used directly.

Using Localized Text

Use useTranslation() from react-i18next in components:

import { useTranslation } from 'react-i18next'

export function BooksTitle() {
  const { t } = useTranslation()

  return <h1>{t('Menu:Books')}</h1>
}

ABP localization keys commonly use the ResourceName::Key format:

{t('AbpIdentity::Users')}
{t('AbpAccount::Login')}
{t('AbpUi::SavedSuccessfully')}

Application-specific menu keys may use names like Menu:Home or Menu:Books.

Adding a Translation

Add the key to src/locales/en.json:

{
  "Menu:Reports": "Reports",
  "Reports": "Reports"
}

Then use it from a component:

const { t } = useTranslation()

return <h1>{t('Reports')}</h1>

Adding a Language

Create a new JSON file, for example src/locales/tr.json:

{
  "Menu:Reports": "Raporlar",
  "Reports": "Raporlar"
}

Register it in src/lib/i18n/i18n.ts:

import en from '@/locales/en.json'
import tr from '@/locales/tr.json'

i18n.use(initReactI18next).init({
  resources: {
    en: { translation: en },
    tr: { translation: tr },
  },
  lng: 'en',
  fallbackLng: 'en',
})

If you add a language selector, call i18n.changeLanguage('tr') when the user chooses Turkish.

Server-Side ABP Localization

ABP's backend localization system is still the source of truth for server-defined resources, validation messages, exception messages, and module texts. The React app uses ABP application configuration through @volo/abp-app-config / @volo/abp-react-app-config for auth and configuration data, and these packages can include localization resources when configured to do so.

The main template currently creates the app configuration client with:

export const appConfig = createAbpReactAppConfig({
  baseUrl: () => getApiUrl(),
  includeLocalizationResources: false,
})

Because includeLocalizationResources is disabled in the main React template, UI text is normally loaded from src/locales/*.json. If you enable server-provided localization resources, make sure your UI initialization merges them into i18next before rendering localized components.

Request Culture

The shared Axios client sends the active i18next language with each request:

if (i18n?.language) {
  config.headers['Accept-Language'] =
    config.headers['Accept-Language'] ?? i18n.language
}

This lets backend responses, validation messages, and exception messages use the selected culture when the server supports it.

Admin Console Localization

The Admin Console has its own React app and localization setup. In layered and single-layer templates, it is served from the Volo.Abp.AdminConsole package. In microservice templates, it is generated as apps/react-admin-console/.

The Admin Console host can expose available languages through AdminConsole:LocalizationLanguages, and /admin-console/api/config returns the normalized language list.

See Also

• React UI
• HTTP Requests
• Localization