Content Systems & CMS 📚

Next.js shines for content-rich apps—choose the right CMS, build pipelines, and keep drafts flowing.

Headless CMS Options 🧩

• Contentful / Sanity / Strapi / Prismic: hosted or self-managed, offer GraphQL/REST APIs.
• DatoCMS, Hygraph: GraphQL-first with preview APIs.
• Use SDKs or fetch with tokens stored server-side.

MDX Pipelines 🧾

• Store content in the repo (/content/**/*.mdx).
• Use contentlayer, next-mdx-remote, or custom loaders.
• Map components to shortcodes for rich embeds.

Static Generation Strategies 🏗️

• Prebuild popular pages (getStaticProps or App Router static rendering) and revalidate periodically.
• Use generateStaticParams in App Router for dynamic MDX pages.

Webhooks & Revalidation 🔔

• Configure CMS webhooks to call /api/revalidate or server actions to refresh caches.
• Pass slug to revalidate specific paths/tags.

Preview/Draft Mode 📝

• Next.js preview mode sets cookies to bypass cache.
• App Router: draftMode().enable() in route handler, then fetch preview content.
• Pages Router: res.setPreviewData + previewData in data fetching functions.

Analogy: CMS integration is running a newsroom—editors (CMS) publish stories, runners (webhooks) alert the presses, and delivery trucks (revalidation) get fresh papers to readers.