Розробка сайту на CMS Sanity

Розробка сайту на CMS Sanity

Sanity — headless CMS з реальним часом, написана на TypeScript. Контентна схема описується в коді (TypeScript/JavaScript), Sanity Studio — кастомізований React-редактор. GROQ — власна мова запитів Sanity, потужніша за REST для складних структур. Контент зберігається в хмарі Sanity (Content Lake), локальне зберігання не підтримується.

Архітектура

Sanity Studio (React SPA)    Next.js Frontend
         ↕                         ↕
   Content Lake (Sanity Cloud)
         ↕ GROQ / REST API
   CDN (image CDN вбудована)

Створення проекту

npm create sanity@latest -- --template clean --create-project "My Site" --dataset production

cd my-site
npm run dev  # Studio: http://localhost:3333

Схема документа

// schemas/post.ts
import { defineType, defineField } from 'sanity'

export const postType = defineType({
  name: 'post',
  title: 'Стаття',
  type: 'document',
  fields: [
    defineField({
      name: 'title',
      title: 'Заголовок',
      type: 'string',
      validation: rule => rule.required().min(5).max(100),
    }),
    defineField({
      name: 'slug',
      title: 'URL Slug',
      type: 'slug',
      options: { source: 'title', maxLength: 96 },
    }),
    defineField({
      name: 'body',
      type: 'blockContent',  // Portable Text
    }),
  ],
})

GROQ запити

// Усі опубліковані статті
*[_type == "post" && publishedAt < now() && !(_id in path("drafts.**"))] | order(publishedAt desc) [0...12] {
  _id,
  title,
  "slug": slug.current,
  publishedAt,
  "author": author->{ name },
  "categories": categories[]->{ title, slug }
}

Інтеграція з Next.js

npm install @sanity/client next-sanity

// lib/sanity.ts
import { createClient } from '@sanity/client'

export const sanityClient = createClient({
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!,
  dataset: 'production',
  apiVersion: '2024-01-01',
  useCdn: process.env.NODE_ENV === 'production',
})

// app/blog/[slug]/page.tsx
import { sanityClient } from '@/lib/sanity'
import { notFound } from 'next/navigation'

export default async function PostPage({ params }: { params: { slug: string } }) {
  const post = await sanityClient.fetch(
    `*[_type == "post" && slug.current == $slug][0] { title, body }`,
    { slug: params.slug }
  )

  if (!post) notFound()
  return <article><h1>{post.title}</h1></article>
}

Типовий стек

Терміни

Базовий сайт з 3–5 типами документів та Next.js фронтендом — 2–3 тижні. Складний проект з кастомними Studio плагінами та Visual Editing — 4–6 тижнів.