Локалізація контенту в 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 дні.