I18n

Not only does Payload support managing localized content, it also has internationalization support so that admin users can work in their preferred language. Payload's i18n support is built on top of i18next. It comes included by default and can be extended in your config.

While Payload's built-in features come translated, you may want to also translate parts of your project's configuration too. This is possible in places like collections and globals labels and groups, field labels, descriptions and input placeholder text. The admin UI will display all the correct translations you provide based on the user's language.

Here is an example of a simple collection supporting both English and Spanish editors:

1
import { CollectionConfig } from 'payload/types'
2
3
export const Articles: CollectionConfig = {
4
slug: 'articles',
5
labels: {
6
singular: {
7
en: 'Article',
8
es: 'Artículo',
9
},
10
plural: {
11
en: 'Articles',
12
es: 'Artículos',
13
},
14
},
15
admin: {
16
group: { en: 'Content', es: 'Contenido' },
17
},
18
fields: [
19
{
20
name: 'title',
21
type: 'text',
22
label: {
23
en: 'Title',
24
es: 'Título',
25
},
26
admin: {
27
placeholder: { en: 'Enter title', es: 'Introduce el título' },
28
},
29
},
30
{
31
name: 'type',
32
type: 'radio',
33
options: [
34
{
35
value: 'news',
36
label: { en: 'News', es: 'Noticias' },
37
}, // etc...
38
],
39
},
40
],
41
}

Admin UI

The Payload admin panel reads the language settings of a user's browser and display all text in that language, or will fall back to English if the user's language is not yet supported. After a user logs in, they can change their language selection in the /account view.

Node Express

Payload's backend uses express middleware to set the language on incoming requests before they are handled. This allows backend validation to return error messages in the user's own language or system generated emails to be sent using the correct translation. You can make HTTP requests with the accept-language header and Payload will use that language.

Anywhere in your Payload app that you have access to the req object, you can access i18next's extensive internationalization features assigned to req.i18n. To access text translations you can use req.t('namespace:key').

Read the i18next API documentation to learn more.

Configuration Options

In your Payload config, you can add translations and customize the settings in i18n. Payload will use your custom options and merge it with the default, allowing you to override the settings Payload provides.

Example Payload config extending i18n:

1
import { buildConfig } from 'payload/config'
2
3
export default buildConfig({
4
//...
5
i18n: {
6
fallbackLng: 'en', // default
7
debug: false, // default
8
resources: {
9
en: {
10
custom: {
11
// namespace can be anything you want
12
key1: 'Translation with {{variable}}', // translation
13
},
14
// override existing translation keys
15
general: {
16
dashboard: 'Home',
17
},
18
},
19
},
20
},
21
//...
22
})

See the i18next configuration options to learn more.

Next

Localization