sanity-live-cache-components

Integrate Sanity Live with Next.js Cache Components in Next.js 16+ apps.

172|58|Updated Jan 8, 2025
One-click install
npx skills add https://github.com/robotostudio/turbo-start-sanity --skill sanity-live-cache-components-robotostudio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sanity-live-cache-components
Source: https://github.com/robotostudio/turbo-start-sanity/tree/main/.claude/skills/sanity-live-cache-components
Command: npx skills add https://github.com/robotostudio/turbo-start-sanity --skill sanity-live-cache-components-robotostudio

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires next-sanity, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps integrate Sanity Live with Next.js Cache Components, optimizing performance for Next.js 16+ apps by setting up caching, visual editing, and handling draft modes efficiently.

Core Features & Use Cases

  • Cache Optimization: Sets up sanityFetch and <SanityLive> for efficient caching of content in Next.js 16+ apps.
  • Visual Editing: Fully supports visual editing integration.
  • Draft Mode Handling: Handles draft mode with explicit perspective/stega prop-drilling for better control.
  • Three-Layer Component Pattern: Implements the three-layer (Page/Dynamic/Cached) component pattern for robust and maintainable code.
  • Use Case: Ideal for configuring or migrating a Next.js app to use cacheComponents with Sanity, or when adding sanityFetch and <SanityLive>.

Quick Start

Run the following command to install the required dependencies:

npm install next-sanity@^13 --save-exact

Frequently Asked Questions about sanity-live-cache-components

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

FAQPage Schema
How do I integrate Sanity Live with Next.js Cache Components for content revalidation?▼

Integrate Sanity Live with Next.js Cache Components by setting up `sanityFetch` and the `<SanityLive>` component to optimize content caching and enable live revalidation in Next.js 16+ apps.

What is the three-layer component pattern for Next.js Cache Components with Sanity?▼

The three-layer component pattern for Next.js Cache Components uses Page, Dynamic, and Cached layers to structure code. It implements explicit perspective and Stega prop-drilling for robust draft mode and visual editing handling.

Does Sanity visual editing work with Next.js Cache Components?▼

Yes, Sanity visual editing fully works with Next.js Cache Components. The integration supports visual editing and draft mode handling through explicit perspective and Stega prop-drilling across the three-layer component pattern.

Do I need Next.js 16 to use Sanity Live Cache Components?▼

Yes, you need Next.js 16.2+ to use Sanity Live Cache Components. You must also install the `next-sanity` dependency and configure specific environment variables for the integration to function properly.

What's the best way to migrate a Next.js app to use Cache Components with Sanity?▼

The best way to migrate a Next.js app is to implement the three-layer Page/Dynamic/Cached component pattern, configure `sanityFetch` with `<SanityLive>`, and ensure explicit perspective and Stega prop-drilling for draft mode handling.

Why does Sanity Live require explicit prop-drilling in Next.js Cache Components?▼

Sanity Live requires explicit perspective and Stega prop-drilling in Next.js Cache Components to maintain better control over draft mode handling and ensure visual editing functions correctly across the Page, Dynamic, and Cached component layers.