Налаштування Sanity Studio

Налаштування Sanity Studio

Sanity Studio — React SPA з редактором контенту. Конфігурується в sanity.config.ts. Можна деплоїти окремо (sanity deploy) або вбудувати в Next.js App Router.

Установка

npm create sanity@latest
# або додати до існуючого Next.js проекту
npm install sanity @sanity/vision

Вбудована Studio в Next.js

npm install next-sanity

// app/studio/[[...tool]]/page.tsx
'use client'
import { NextStudio } from 'next-sanity/studio'
import config from '@/sanity.config'

export default function StudioPage() {
  return <NextStudio config={config} />
}

// sanity.config.ts
import { defineConfig } from 'sanity'
import { structureTool } from 'sanity/structure'
import { visionTool } from '@sanity/vision'
import { schema } from './sanity/schema'

export default defineConfig({
  basePath: '/studio',
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!,
  dataset: 'production',
  plugins: [
    structureTool(),
    visionTool({ defaultApiVersion: '2024-01-01' }),
  ],
  schema,
})

Кастомна структура навігації

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(),
        // Singleton — єдиний запис
        S.listItem()
          .title('Налаштування сайту')
          .id('siteSettings')
          .child(
            S.document()
              .documentId('siteSettings')
              .schemaType('siteSettings')
              .title('Налаштування')
          ),
      ]),
})

Деплой Studio

# Деплой на sanity.io (безкоштовно)
npx sanity deploy
# Studio: https://your-project.sanity.studio

# або через Vercel — деплоїти як частину Next.js застосунку

Змінні середовища

NEXT_PUBLIC_SANITY_PROJECT_ID=abc123
NEXT_PUBLIC_SANITY_DATASET=production
SANITY_API_TOKEN=skTokenXxx...   # тільки для сервера (для чернеток)
SANITY_WEBHOOK_SECRET=webhook-secret

Терміни

Налаштування Sanity Studio з вбудуванням у Next.js та базовою навігацією — 0,5–1 день.