CMS Integration

Headless CMS integration patterns for Next.js applications

Metadata

• •Name: cms-integration
• •Version: 1.0.0
• •Author: webrenew
• •Tags: nextjs, cms, sanity, contentful, payload, strapi, headless, isr, draft-mode, webhook

When to Use

This skill should be used when:

• •Choosing a headless CMS for a Next.js project
• •Integrating Sanity, Contentful, Payload, Strapi, or other CMS platforms
• •Setting up ISR with CMS webhooks for on-demand revalidation
• •Implementing draft mode / live preview for content editors
• •Modeling content types, relationships, and rich text rendering
• •Generating TypeScript types from CMS schemas
• •Migrating from WordPress or legacy CMS to headless architecture
• •Optimizing CMS data fetching and caching strategies

Summary

Comprehensive headless CMS integration guide for Next.js covering CMS selection (Sanity, Contentful, Payload, Strapi, Storyblok, Hygraph, DatoCMS, Keystatic, Tina), architecture patterns, deep-dive integration guides for Sanity (GROQ, Visual Editing, Portable Text), Contentful (GraphQL, live preview), and Payload (Next.js native), draft mode implementation, ISR with webhook-triggered revalidation, TypeScript type generation from CMS schemas, content modeling best practices, performance and caching strategies, WordPress migration playbooks, and common integration mistakes.