Website Development on Sanity CMS

Website Development with Sanity CMS

Sanity is a headless CMS with real-time capabilities, written in TypeScript. Content schema is described in code (TypeScript/JavaScript), Sanity Studio is a customizable React editor. GROQ is Sanity's own query language, more powerful than REST for complex structures. Content is stored in Sanity Cloud (Content Lake), local storage is not supported.

Architecture

Sanity Studio (React SPA)    Next.js Frontend
         ↕                         ↕
   Content Lake (Sanity Cloud)
         ↕ GROQ / REST API
   CDN (image CDN built-in)

Creating a Project

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

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

Document Schema

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

export const postType = defineType({
  name: 'post',
  title: 'Article',
  type: 'document',
  fields: [
    defineField({
      name: 'title',
      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 Queries

// All published articles
*[_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 }
}

Integration with 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>
}

Typical Stack

Timeline

Basic website with 3–5 document types and Next.js frontend — 2–3 weeks. Complex project with custom Studio plugins and Visual Editing — 4–6 weeks.