skills.rest
AarnavBaddam
AarnavBaddamCOMMUNITY
Explore all skills by this author →
GitHub

cms

Integrates headless CMS platforms with Next.js applications deployed on Vercel.

Updated Jul 31, 2026
Search Tags:#next.js#vercel#headless cms#visual editing#revalidation#sanity#contentful
One-click install
npx skills add https://github.com/AarnavBaddam/skills --skill cms-aarnavbaddam
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cms
Source: https://github.com/AarnavBaddam/skills/tree/main/cms
Command: npx skills add https://github.com/AarnavBaddam/skills --skill cms-aarnavbaddam

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Connecting a headless CMS to a Next.js site on Vercel involves many moving parts: SDK setup, content modeling, preview mode, revalidation webhooks, and Visual Editing. This Skill provides working code patterns and configuration guidance so you avoid misconfigured clients, broken previews, and stale content. ## Core Features & Use Cases - Sanity Integration: Marketplace installation with auto-provisioned environment variables, embedded Studio, live content via defineLive(), and Visual Editing with next-sanity v12. - Multi-CMS Support: Client setup and data fetching patterns for Contentful, DatoCMS, Storyblok, and Builder.io. - Preview & Revalidation: Next.js Draft Mode routes and signed on-demand revalidation webhooks to keep published content fresh. - Use Case: You are building a marketing site on Vercel where editors manage blog posts in Sanity. Use this Skill to scaffold the Sanity client, embed the Studio at /studio, enable click-to-edit Visual Editing, and wire a webhook that revalidates pages on publish. ## Quick Start Set up a Sanity integration for my Next.js app on Vercel with an embedded studio, draft mode preview, and a revalidation webhook.

Frequently Asked Questions about cms

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I integrate Sanity with Next.js on Vercel?▼

Install Sanity from the Vercel Marketplace with vercel integration add sanity, which auto-provisions project ID and dataset environment variables. Then install next-sanity and @sanity/client, create a client with createClient, and fetch content in server components.

How to set up live content updates with next-sanity defineLive?▼

Use defineLive from the next-sanity/live subpath with a configured client and a server token. It returns sanityFetch for queries and a SanityLive component that enables real-time updates without manual revalidation. Note that fetchOptions.revalidate was removed in v12.

Sanity vs Contentful for a Next.js site on Vercel?▼

Sanity is the native Vercel Marketplace integration with first-class Visual Editing and auto-provisioned environment variables. Contentful works via its JavaScript SDK with manually configured space ID and access tokens, but lacks the embedded studio and live content features.

Does next-sanity v12 support Visual Editing?▼

Yes, Visual Editing works with next-sanity v12 when imported from the next-sanity/visual-editing subpath. It requires Sanity Studio v5 or later, React 19.2, @sanity/visual-editing v5+, and Draft Mode enabled in your layout.

How do I revalidate Next.js pages when CMS content changes?▼

Create a route handler that verifies the webhook signature with parseBody from next-sanity/webhook, then call revalidateTag with the content type. Point a Sanity webhook at your /api/revalidate endpoint and store the secret in SANITY_REVALIDATE_SECRET.

Why is my Sanity draft preview not working in Next.js?▼

Draft preview requires a draft mode route that validates a secret and calls draft.enable() from next/headers. You also need a Viewer role server token passed to defineLive so draft content can be fetched during Visual Editing.

Related Skills

Explore More Software Engineering Skills→
Moisesjr20Moisesjr20
1

marketplace

Manage Vercel Marketplace integration discovery, installation, and environment variable provisioning.

Community
Intermediate
openaiopenai
5.3k

cms

Integrate headless CMS platforms with Next.js applications deployed on Vercel.

Official
Intermediate
harperaaharperaa
15

security-operations-deployment

Apply security middleware and validate environment variables for deployment.

Community
Intermediate
LeoYeAILeoYeAI
1.1k

content-strategy

Plan content pillars, editorial calendars, and KPI-driven workflows.

Community
Advanced