Клієнт приходить з готовим React-додатком — контент живе в JSON-файлах. Кожен реліз — копіпаст даних через Slack, правки губляться, мікроконтролери божеволіють. Перехід на Contentful — спасіння, але неправильна схема контенту перетворює CMS на болото. Помилки в типах полів або відсутність валідації вбивають масштабування. Ми налаштовуємо Space так, щоб розробники та контент-менеджери не проклинали все на світі.
За більш ніж 5 років роботи з Contentful ми накопичили сотні годин оптимізації. Наприклад, один клієнт втрачав до 20% контенту при ручному перенесенні — після налаштування Space з автоматичною валідацією помилки зникли повністю. Вартість такого налаштування визначається після аналізу складності моделі та кількості оточень. Нижче — ключові етапи професійного налаштування.
Як спроектувати Content Model для масштабування?
Content Model — скелет проєкту. Неправильна нормалізація веде до N+1 запитів та переускладнених редакторських форм. Дотримуємося правила: один тип контенту — одна сутність (стаття, автор, категорія). Для блогу вистачить 4–6 типів. Приклад структури:
| Компонент | Тип поля | Валідація | Локалізація |
|---|---|---|---|
| title | Short text | required, unique | так |
| slug | Short text | unique, regex: ^[a-z0-9-]+ | ні |
| content | Rich Text | required | так |
| heroImage | Media (image) | - | ні |
| author | Reference | 1:1 to Author | ні |
| categories | References | many to Category | ні |
Приклад Content Model для інтернет-магазину
- Product: title, slug, description, price, images, categories
- Category: name, slug, parent (self-reference)
- Brand: name, logo, website
- Page: title, slug, content (Rich Text)
Всього 4 типи з мінімальною depth. Нормалізація дозволяє уникнути дублювання даних.
Використовуйте field-level locale для SEO-полів (title, description) — це дає гнучкість без дублювання контенту. За даними офіційної документації Contentful, правильна локалізація з field-level locale скорочує обсяг дубльованих полів на 40%. Для проєкту з 5+ локалями рекомендується не перевищувати 10 Content Types — інакше продуктивність редакторського інтерфейсу падає.
Що обрати: GUI, CLI чи кодогенерацію?
CLI-підхід у 3 рази швидший за ручне створення через GUI і дозволяє версіонувати модель в Git. Порівняйте:
| Спосіб | Швидкість | Версіонування | Типізація |
|---|---|---|---|
| GUI | ~1 година | ні | ні |
| CLI | ~15 хвилин | так (JSON) | ні |
| Codegen | ~1 хвилина | так (TypeScript) | повна |
Для продакшену комбінуємо CLI + кодогенерацію: експорт моделі, правки в JSON, імпорт через CI. Це економить 2 дні на кожній зміні моделі та скорочує витрати на контент-менеджмент на 30–50%. Зв'яжіться з нами для консультації з архітектури Space — розберемо вашу модель за 30 хвилин.
Налаштування оточень та API-токенів
Використовуйте окремі оточення для staging та production. Кожне оточення має свої CDA, Preview та CMA токени. Ніколи не використовуйте CMA-токен на фронтенді — це діра в безпеці.
# Створити оточення staging і скопіювати модель з master contentful space environment create --name staging \ --environment-id staging --source master В SDK для фронтенду використовуйте CDA-токен з environment staging:
const client = createClient({ space: SPACE_ID, accessToken: STAGING_CDA_TOKEN, environment: 'staging', }) Автоматизація вивантаження моделі в Git
Використовуйте Contentful CLI для експорту моделі без контенту:
contentful space export --space-id xxx --skip-content --export-dir ./model Файл contentful-export-xxx.json зберігається в репозиторії. При зміні моделі — імпорт через CI в потрібні оточення. Виключає людський фактор і прискорює деплой. За офіційною документацією Contentful, це найкраща практика для командної роботи.
Генерація TypeScript-типів із Content Model
Кодогенерація через cf-content-types-generator створює повні інтерфейси:
npx cf-content-types-generator \ --spaceId YOUR_SPACE_ID \ --token YOUR_CMA_TOKEN \ --out ./src/types/contentful.d.ts Після цього імпорт import { IBlogPost } from './types/contentful' дає автокомпліт та захист від помилок. Економить 1–2 години ручного опису TypeScript-типів на кожен проєкт.
Покрокова інструкція налаштування Space
- Аналіз вимог — визначаємо типи контенту, поля, валідації (1 година).
- Створення Space та оточень — master, staging, dev через CLI (15 хвилин).
- Проектування та імпорт Content Model — створюємо JSON-схему, імпортуємо через CLI (30 хвилин).
- Генерація типів та документація — кодогенерація TypeScript, написання readme (1 година).
Все налаштування займає 1–2 дні та знижує операційні витрати на 20–30%. Вартість типового налаштування визначається після аналізу обсягу. Економія на ручному перенесенні контенту сягає значної суми.
Що входить у нашу роботу?
- Аналіз вимог та проектування Content Model
- Створення Space, оточень (production, staging, dev)
- Налаштування API-токенів (CDA, Preview, CMA)
- Імпорт/експорт моделі через CLI, інтеграція в CI/CD
- Генерація TypeScript-типів та підключення до проєкту
- Документація з роботи з простором для контент-менеджерів
Гарантуємо: жодного зайвого поля, повна валідація на рівні CMS, готова до масштабування архітектура. Ми працюємо з Contentful більше 5 років — за цей час реалізували понад 30 проєктів різної складності. Типовий проєкт (4–6 Content Types, 2 локалі, 2 оточення) налаштовуємо за 1–2 дні. Вартість розраховується індивідуально — залежить від складності моделі та вимог до автоматизації. Просто напишіть нам — ми підготуємо архітектуру та точний план робіт.