Setting Up Sanity Studio
Sanity Studio is a React SPA with content editor. Configured in sanity.config.ts. Can be deployed separately (sanity deploy) or embedded in Next.js App Router.
Installation
npm create sanity@latest
# or add to existing Next.js project
npm install sanity @sanity/vision
Embedded Studio in 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,
})
Custom Navigation Structure
import { structureTool } from 'sanity/structure'
structureTool({
structure: (S) =>
S.list()
.title('Content')
.items([
S.listItem()
.title('Articles')
.icon(() => '📝')
.child(
S.documentTypeList('post')
.title('All articles')
.filter('_type == "post"')
.defaultOrdering([{ field: 'publishedAt', direction: 'desc' }])
),
S.divider(),
// Singleton — single record
S.listItem()
.title('Site Settings')
.id('siteSettings')
.child(
S.document()
.documentId('siteSettings')
.schemaType('siteSettings')
.title('Settings')
),
]),
})
Deploy Studio
# Deploy to sanity.io (free)
npx sanity deploy
# Studio: https://your-project.sanity.studio
# or via Vercel — deploy as part of Next.js app
Environment Variables
NEXT_PUBLIC_SANITY_PROJECT_ID=abc123
NEXT_PUBLIC_SANITY_DATASET=production
SANITY_API_TOKEN=skTokenXxx... # server-only (for drafts)
SANITY_WEBHOOK_SECRET=webhook-secret
Timeline
Setting up Sanity Studio with embed in Next.js and basic navigation — 0.5–1 day.