Локализация контента в Payload CMS
Payload поддерживает многоязычный контент на уровне полей: каждое помеченное как localized поле хранит отдельные значения для каждой локали. В PostgreSQL это колонка с JSONB-объектом {ru: "...", en: "...", uk: "..."}.
Конфигурация локалей
// payload.config.ts
export default buildConfig({
localization: {
locales: [
{ label: 'Русский', code: 'ru' },
{ label: 'English', code: 'en' },
{ label: 'Українська', code: 'uk' },
],
defaultLocale: 'ru',
fallback: true, // если перевода нет — использовать дефолтную локаль
},
})
Локализованные поля
// collections/Posts.ts
fields: [
{
name: 'title',
type: 'text',
localized: true, // отдельное значение для каждой локали
required: true,
},
{
name: 'content',
type: 'richText',
localized: true,
},
{
name: 'slug',
type: 'text',
localized: true, // slug тоже можно локализовать
unique: true,
},
{
name: 'featuredImage',
type: 'upload',
relationTo: 'media',
// НЕ localized — одно изображение для всех локалей
},
]
Запросы с локалью
// Получить посты на русском
const posts = await payload.find({
collection: 'posts',
locale: 'ru',
})
// Получить пост на всех языках сразу
const allLocales = await payload.findByID({
collection: 'posts',
id: postId,
locale: 'all',
})
// allLocales.title = { ru: '...', en: '...', uk: '...' }
// REST API:
// GET /api/posts?locale=en
// GET /api/posts/123?locale=all
Интеграция с Next.js i18n
// app/[locale]/posts/[slug]/page.tsx
import { getPayload } from 'payload'
import { notFound } from 'next/navigation'
type Locale = 'ru' | 'en' | 'uk'
export default async function PostPage({
params,
}: {
params: { locale: Locale; slug: string }
}) {
const payload = await getPayload({ config })
const result = await payload.find({
collection: 'posts',
locale: params.locale,
where: {
and: [
{ slug: { equals: params.slug } },
{ _status: { equals: 'published' } },
],
},
})
if (!result.docs[0]) notFound()
return <PostPage post={result.docs[0]} />
}
export async function generateStaticParams() {
const payload = await getPayload({ config })
const locales: Locale[] = ['ru', 'en', 'uk']
const params: { locale: Locale; slug: string }[] = []
for (const locale of locales) {
const posts = await payload.find({ collection: 'posts', locale, limit: 1000 })
posts.docs.forEach(post => {
if (post.slug) params.push({ locale, slug: post.slug as string })
})
}
return params
}
Сроки
Настройка локализации для 3 языков с адаптацией существующих коллекций и Next.js роутинга — 1–2 дня.