I'm using Payload CMS with a Next.JS frontend and axios for fetching data via the provided REST API. I need i18n support for the content as well as the interface, e.g. error and validation messages.
Problem
This seems to work at least partially. However, some API error messages are still in english, even if I set the Accept-Language header to de.
For example it does work correctly for the /api/{user-collection}/login route, depending on the value set in the Accept-Language header:
// For Accept-Language: de
{
"errors": [
{
"message": "Die E-Mail-Adresse oder das Passwort sind nicht korrekt."
}
]
}
// For Accept-Language: en
{
"errors": [
{
"message": "The email or password provided is incorrect."
}
]
}
In contrast, i18n does not seem to work for route /api/{user-collection}/verify/{token}:
// For Accept-Language: de
{
"errors": [
{
"message": "Verification token is invalid."
}
]
}
// For Accept-Language: en
{
"errors": [
{
"message": "Verification token is invalid."
}
]
}
First of all I though the required translation key might be missing. But I check it and it seems the required translation key is present for both locales, de and en. Any ideas or similar experience?
Edit #1
Even overwriting the keys explicitly doesn't change anything, wether for the german nor the english locale.
i18n: {
supportedLanguages: {
de,
en,
},
fallbackLanguage: 'de',
translations: {
de: {
error: {
verificationTokenInvalid: 'Test',
},
},
en: {
error: {
verificationTokenInvalid: 'Test',
},
},
},
},
The provided error message remains Verification token is invalid..
Edit #2
I might have fount the root of the problem. It seems like the error message used for invalid tokens is hardcoded in english, see here. Hence, no translations are used independently of any Accept-Language header settings...
Appendix
These are my package versions:
"@payloadcms/db-postgres": "3.47.0",
"@payloadcms/next": "3.47.0",
"@payloadcms/payload-cloud": "3.47.0",
"@payloadcms/richtext-lexical": "3.47.0",
"@payloadcms/translations": "^3.48.0",
"@payloadcms/ui": "3.47.0",
The following is my payload.config.ts:
...
import { de } from '@payloadcms/translations/languages/de'
import { en } from '@payloadcms/translations/languages/en'
export default buildConfig({
...
i18n: {
supportedLanguages: {
de,
en,
},
fallbackLanguage: 'de',
},
localization: {
locales: [
{
code: 'de',
label: {
de: 'Deutsch',
en: 'Englisch'
},
},
{
code: 'en',
label: {
de: 'German',
en: 'English'
},
},
],
defaultLocale: 'de',
},
})
Accept-Languageheader generally works. It just doesn't seem to work for certain error types or scenarios...