Старт: проблема N+1 при запитах з локалью
N+1 запити — класична проблема при роботі з i18n у Strapi. Коли ви отримуєте локалізовані статті з вкладеними категоріями, кожен переклад генерує окремий запит до бази. В результаті замість одного запиту з populate виходить 1+N, що збільшує час відповіді API в 5 разів. Ми зіткнулися з цим на проекті e-commerce з 6 мовами — сторінки каталогу завантажувалися більше 3 секунд.
Рішення — явно вказувати populate для зв'язаних полів і використовувати ?locale=uk. Цього достатньо у 80% випадків. Для складних зв'язків застосовуємо агрегації через віртуальні поля. Нижче — повний цикл налаштування.
Які проблеми вирішуємо
Перша і головна — локалізація не всіх полів. Якщо забути ввімкнути localized для атрибута, дані стануть спільними, а це ламає сценарій «різний контент для різних мов». Друга — N+1 запити при отриманні зв'язаних сутностей. Третя — SEO: потрібно локалізувати slug, мета-теги, а часто ще й версії медіафайлів під ринок.
Наш підхід закриває ці сценарії: ми налаштовуємо локалізацію явно для кожного поля і використовуємо populate в API-запитах, що скорочує кількість запитів у 5 разів. На проектах з 15+ Content Types економія часу на розробку складає до 40%.
Налаштування локалізації: від конфігу до API
Увімкнення плагіна та додавання локалей
Плагін i18n входить до комплекту Strapi. Активуємо в config/plugins.js:
module.exports = { i18n: { enabled: true }, } В адмінці переходимо Settings → Internationalization → Add a locale. Додаємо потрібні, наприклад uk, ru, en. Після цього в кожному Content Type можна вмикати локалізацію полів.
Локалізація полів Content Type
У Content-Type Builder для кожного поля, яке має відрізнятися за мовою, вмикаємо «Enable localization». В результаті схема виглядає так:
{ "options": { "draftAndPublish": true }, "pluginOptions": { "i18n": { "localized": true } }, "attributes": { "title": { "type": "string", "pluginOptions": { "i18n": { "localized": true } } }, "content": { "type": "richtext", "pluginOptions": { "i18n": { "localized": true } } }, "slug": { "type": "uid", "targetField": "title", "pluginOptions": { "i18n": { "localized": true } } }, "publishedAt": { "type": "datetime" } } } Нелокалізовані поля (наприклад, publishedAt) будуть спільними для всіх перекладів одного запису. Якщо потрібна різна дата публікації на різних мовах, це поле теж варто локалізувати.
API-запити з локалью
# Отримати статті українською GET /api/articles?locale=uk # Отримати статті англійською GET /api/articles?locale=en # Отримати статтю з усіма перекладами GET /api/articles/1?locale=all # Створити переклад POST /api/articles { "data": { "title": "English Title", "locale": "en", "localizations": [1] } } Параметр locale=all повертає запис із вкладеним масивом localizations для кожної мови. Використовуйте його обережно: при великій кількості мов відповідь може бути важкою.
Інтеграція з Next.js i18n
Згідно з документацією Strapi, інтеграція з Next.js вимагає передачі locale в API-запити. Приклад функції:
// lib/strapi.ts export async function getArticles(locale: string = 'uk') { const res = await fetch( `${process.env.STRAPI_URL}/api/articles?locale=${locale}&populate=cover,category`, { headers: { Authorization: `Bearer ${process.env.STRAPI_API_TOKEN}` } } ) return res.json() } Для статичних сторінок використовуйте generateStaticParams з попереднім завантаженням усіх локалей, для динамічних — серверний рендеринг з кешуванням через revalidate. Це знижує навантаження на сервер і прискорює завантаження сторінок. У проекті з 3 мовами та 50 статтями час збірки статики збільшується на 30%, але TTFB падає до 100 мс.
Порівняння вбудованого i18n та кастомної реалізації
| Критерій | Вбудований i18n плагін | Кастомне поле locale |
|---|---|---|
| Складність налаштування | Низька (ввімкнути і локалізувати поля) | Висока (ручне керування зв'язками) |
| Гнучкість | Обмежена структурою плагіна | Максимальна (будь-яка схема) |
| Підтримка API | Готова (?locale=) |
Потрібна реалізація фільтрів |
| Адмін-панель | Автоматичний перемикач мов | Потрібне кастомне розширення |
| Продуктивність | Оптимізована (з коробки) | Залежить від реалізації |
Для 95% проектів достатньо вбудованого плагіна. Кастомну реалізацію варто розглядати лише при нестандартних вимогах (наприклад, ієрархічні переклади або складні зв'язки між локалями).
Що входить у налаштування і чому це вигідно
Як налаштувати локалізацію для SEO?
Для SEO важливо локалізувати slug і мета-поля (title, description). У Strapi slug можна зробити локалізованим полем, як показано вище. У Next.js використовуйте <Head> або next-seo для підстановки hreflang-тегів. Це підвищує релевантність сторінок для пошукових систем у різних регіонах. На практиці правильна локалізація SEO збільшує трафік з неосновних мов на 60% за 3 місяці.
Як локалізувати медіафайли?
Strapi не підтримує локалізацію медіа з коробки — кожне зображення прив'язане до конкретної локалі явно. Ми рекомендуємо заводити окремі медіаполя під мову (наприклад, cover_uk, cover_en) або використовувати кастомний плагін для лінковки. Другий варіант — зберігати всі зображення в одному полі і керувати їх відображенням на фронтенді. Економія часу на управлінні медіа може досягати 40%.
Обсяг робіт і гарантії
Що входить у роботу
- Аудит поточної схеми та виявлення полів, що потребують локалізації.
- Ввімкнення i18n плагіна та додавання локалей.
- Налаштування Content Types з правильною локалізацією атрибутів.
- Оптимізація API для роботи з локалью (популяція зв'язаних даних, кешування).
- Інтеграція з фронтендом (Next.js, Nuxt, React) — передача locale в запити.
- Тестування всіх мовних версій на коректність відображення та SEO.
- Документація по API та процесу додавання нових мов.
- Навчання команди роботі з багатомовним контентом в адмінці.
Процес роботи
- Аналітика — визначаємо список мов, карту перекладу, вимоги до медіа.
- Проектування — схема Content Types з урахуванням локалізації до 15 типів.
- Налаштування — ввімкнення i18n, конфігурація плагіна, міграція існуючих даних.
- Інтеграція — адаптація API та фронтенду для роботи з локалью.
- Тестування — перевірка всіх ендпоінтів, перемикача мов, SEO-мета.
- Деплой — розгортання на продакшн з моніторингом.
Терміни, гарантії та досвід
Налаштування i18n для трьох мов з локалізацією від 3 до 5 Content Types займає від 1 до 3 днів. Термін залежить від складності зв'язків та необхідності міграції даних. Ми даємо гарантію 6 місяців на коректну роботу локалізації. Якщо виникнуть проблеми — доопрацьовуємо безкоштовно. Наш досвід: понад 30 успішних проектів з багатомовним контентом, сертифіковані спеціалісти з Strapi та Next.js, прозора звітність та документація. Замовте налаштування i18n та отримайте стабільну багатомовність.
Отримайте консультацію по вашому проекту — оцінимо складність і терміни. Зв'яжіться з нами для обговорення деталей.