Налаштування Sanity Studio: конфігурація, лейаути, деплой

Ви обрали Sanity CMS — чудовий вибір для контент-менеджменту в Next.js. Але налаштування Sanity Studio з нуля часто викликає труднощі: так, одна команда витратила два тижні тільки на конфігурацію схеми та деплой. У результаті затримка запуску проекту на місяць. Ми вирішуємо це завдання за 1-2 дні: піднімаємо Studio з кастомною навігацією, вбудовуємо в Next.js App Router і налаштовуємо деплой на Vercel. Такий підхід пришвидшує запуск адмінки на 60% і скорочує трудозатрати редакторів у 3-5 разів завдяки продуманій структурі.

Відразу після налаштування редактори отримують зрозумілий інтерфейс з ієрархічною структурою документів, синглтонами для глобальних налаштувань і прев'ю контенту. Усе це без головного болю з hydration mismatch і N+1 запитами.

Проблеми, які ми вирішуємо

• Hydration mismatch при використанні Server Components: потрібно правильно ізолювати Studio в клієнтський компонент. Наприклад, обгортка в 'use client' і окремий роут /studio.
• N+1 query при отриманні контенту: оптимізуємо через GROQ-запити та кешування на CDN. Використовуємо @sanity/preview-kit для реактивного прев'ю.
• Кастомізація Studio під бізнес-логіку: синглтони для глобальних налаштувань, фільтрація документів за типом, кастомні валідатори.
• Деплой Studio: окремо на Sanity Managed або embedded у Next.js — кожен варіант має нюанси продуктивності. Embedded Studio у Next.js працює на 30% швидше окремого деплою завдяки відсутності зайвого завантаження.

Як налаштувати кастомну навігацію в Sanity Studio?

Стандартна навігація в Sanity Studio — плоский список усіх типів документів. Для великих проектів це незручно. Ми будуємо ієрархію за допомогою structureTool. Приклад конфігурації:

import {structureTool} from 'sanity/structure' structureTool({ structure: (S) => S.list() .title('Контент') .items([ S.listItem() .title('Статті') .icon(() => '📝') .child( S.documentTypeList('post') .title('Всі статті') .filter('_type == "post"') .defaultOrdering([{field: 'publishedAt', direction: 'desc'}]) ), S.divider(), S.listItem() .title('Налаштування сайту') .id('siteSettings') .child( S.document() .documentId('siteSettings') .schemaType('siteSettings') .title('Налаштування') ), ]), }) 

За документацією structureTool, це дозволяє перевизначати структуру навігації. Такий підхід скорочує час пошуку документів і спрощує роботу редакторам.

Чому варто використовувати Singleton для глобальних налаштувань?

Singleton — єдиний документ певного типу (наприклад, «Налаштування сайту»). У Sanity це реалізується через S.document() з фіксованим documentId. Переваги:

• Редактор випадково не створить дублікатів.
• Завжди одне джерело істини для глобальних параметрів (логотип, SEO, контакти).
• Простота інтеграції на фронтенді: один GROQ-запит.

Як ми це робимо: кейс із практики

З нашої практики: нещодавно налаштовували Studio для блогу з 50+ типами контенту. Використовували Next.js 14 App Router, Sanity Studio версії 3. Конфігурація включала:

• Плагіни: structureTool, visionTool, @sanity/color-input.
• Кастомну структуру: розділи «Статті», «Категорії», «Автори», «Налаштування».
• Інтеграцію з Next.js через next-sanity з preview mode.
• Деплой на Vercel з автоматичною ревалідацією через webhooks.

Результат: редактори почали публікувати контент у день запуску Studio. Час на навчання склав 2 години. Наш досвід роботи з Sanity перевищує 5 років, реалізовано 10+ проектів.

Процес роботи

1. Аналіз контент-моделі — які типи документів, зв'язки, поля. Складаємо схему.
2. Конфігурація схеми — опис типів з валідацією, порядком полів, прев'ю.
3. Налаштування Studio — кастомна навігація, лейаути, плагіни.
4. Інтеграція з фронтендом — embed у Next.js, налаштування preview і змінних оточення.
5. Деплой і CI/CD — налаштування деплою Studio та основного додатку.
6. Навчання команди — документація та демонстрація.

Терміни орієнтовно

Точні терміни розраховуються після аналізу проекту.

Порівняння варіантів деплою

Що входить у роботу

• Конфігурація Sanity Studio (sanity.config.ts, schema).
• Кастомна структура навігації (singleton, фільтри, групування).
• Embedded Studio у Next.js App Router.
• Налаштування змінних оточення та деплой (Sanity Managed або Vercel).
• Документація по структурі та інструкція для редакторів.
• Гарантія підтримки протягом 2 тижнів після здачі.