Настройка Sanity Studio

Настройка Sanity Studio

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

Установка

npm create sanity@latest
# или добавить в существующий Next.js проект
npm install sanity @sanity/vision

Embedded 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: process.env.NEXT_PUBLIC_SANITY_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 с embed в Next.js и базовой навигацией — 0,5–1 день.