Traditional CMS:
┌──────────────────────┐
│  Content + Templates  │ → One website
└──────────────────────┘

Headless CMS:
┌───────────┐    API    ┌─── Website (Next.js)
│  Content   │ ────────→├─── Mobile App (React Native)
│  (JSON)    │          ├─── Digital Signage
└───────────┘          └─── Voice Assistant

# Install the CLI
npm create sanity@latest

# Follow the prompts:
# - Create or select a project
# - Choose a dataset (production)
# - Pick a template (blog, clean, etc.)

# Start the studio
cd my-sanity-studio
npm run dev

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

export default defineType({
  name: 'post',
  title: 'Blog Post',
  type: 'document',
  fields: [
    defineField({
      name: 'title',
      title: 'Title',
      type: 'string',
      validation: (rule) => rule.required().max(100),
    }),
    defineField({
      name: 'slug',
      title: 'Slug',
      type: 'slug',
      options: { source: 'title' },
    }),
    defineField({
      name: 'author',
      title: 'Author',
      type: 'reference',
      to: [{ type: 'author' }],
    }),
    defineField({
      name: 'coverImage',
      title: 'Cover Image',
      type: 'image',
      options: { hotspot: true },
    }),
    defineField({
      name: 'body',
      title: 'Body',
      type: 'array',
      of: [
        { type: 'block' },       // Rich text
        { type: 'image' },       // Inline images
        { type: 'code' },        // Code blocks
      ],
    }),
    defineField({
      name: 'publishedAt',
      title: 'Published At',
      type: 'datetime',
    }),
  ],
})

// Fetch all published posts
const query = `*[_type == "post" && publishedAt < now()] | order(publishedAt desc) {
  title,
  "slug": slug.current,
  publishedAt,
  "authorName": author->name,
  "coverUrl": coverImage.asset->url
}`

// Fetch a single post by slug
const postQuery = `*[_type == "post" && slug.current == $slug][0] {
  title,
  body,
  publishedAt,
  "author": author-> {
    name,
    "avatar": image.asset->url
  },
  "related": *[_type == "post" && _id != ^._id] | order(publishedAt desc) [0...3] {
    title,
    "slug": slug.current
  }
}`

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

export const client = createClient({
  projectId: 'your-project-id',
  dataset: 'production',
  apiVersion: '2026-02-24',
  useCdn: true, // false for real-time previews
})

// Fetch posts
export async function getPosts() {
  return client.fetch(
    `*[_type == "post"] | order(publishedAt desc) {
      title,
      "slug": slug.current,
      publishedAt,
      "coverUrl": coverImage.asset->url
    }`
  )
}

// Fetch single post
export async function getPost(slug: string) {
  return client.fetch(
    `*[_type == "post" && slug.current == $slug][0] {
      title,
      body,
      "author": author->{ name },
      publishedAt
    }`,
    { slug }
  )
}

// app/blog/page.tsx (Next.js App Router)
import { getPosts } from '@/lib/sanity'

export default async function BlogPage() {
  const posts = await getPosts()

  return (
    <div className="grid gap-6">
      {posts.map((post) => (
        <article key={post.slug}>
          <img src={post.coverUrl} alt={post.title} />
          <h2>{post.title}</h2>
          <time>{new Date(post.publishedAt).toLocaleDateString()}</time>
        </article>
      ))}
    </div>
  )
}

// components/PortableText.tsx
import { PortableText } from '@portabletext/react'

const components = {
  types: {
    image: ({ value }) => (
      <img src={urlFor(value).width(800).url()} alt={value.alt} />
    ),
    code: ({ value }) => (
      <pre className="bg-gray-900 p-4 rounded-lg">
        <code>{value.code}</code>
      </pre>
    ),
  },
  marks: {
    link: ({ children, value }) => (
      <a href={value.href} target="_blank" rel="noopener">
        {children}
      </a>
    ),
  },
}

export function PostBody({ body }) {
  return <PortableText value={body} components={components} />
}