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.
1---2name: cms-integration3description: Choose and connect a headless CMS to a Next.js app. Use this skill for CMS selection, content models, draft mode, live preview, webhooks, revalidation, type generation, caching, and migration.4---56# CMS Integration78> Headless CMS integration patterns for Next.js applications910## Metadata1112- **Name**: cms-integration13- **Version**: 1.0.014- **Author**: webrenew15- **Tags**: nextjs, cms, sanity, contentful, payload, strapi, headless, isr, draft-mode, webhook1617## When to Use1819This skill should be used when:20- Choosing a headless CMS for a Next.js project21- Integrating Sanity, Contentful, Payload, Strapi, or other CMS platforms22- Setting up ISR with CMS webhooks for on-demand revalidation23- Implementing draft mode / live preview for content editors24- Modeling content types, relationships, and rich text rendering25- Generating TypeScript types from CMS schemas26- Migrating from WordPress or legacy CMS to headless architecture27- Optimizing CMS data fetching and caching strategies2829## Summary3031Comprehensive 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.
webrenew