Next.js Headless CMS

Next.js is the most popular React framework for production web applications, and pairing it with a headless CMS unlocks the best of both worlds: a powerful frontend framework with server components, streaming, and edge rendering — backed by structured content that editors can manage without touching code.

Decoupled.io gives your Next.js application a full-featured content backend with a type-safe TypeScript client, a visual page builder, AI-powered content generation, and 25+ MCP tools for agentic workflows.

Why Decoupled.io for Next.js

Type-safe by default — decoupled-client auto-generates TypeScript interfaces from your Drupal schema. Full IDE autocomplete, build-time error checking, zero hand-written GraphQL.
App Router native — fetch content in Server Components with zero client-side overhead. No useEffect, no loading spinners, no waterfall requests.
SSR, SSG, and ISR support — use generateStaticParams for static pages, on-demand revalidation for ISR, or real-time server rendering. The typed client works with every Next.js rendering strategy.
Visual page builder — build landing pages with Puck, a React-based visual editor that maps directly to your Next.js component library. Editors compose pages visually; developers maintain full control over rendering.
Vercel-ready deployment — Decoupled.io pairs naturally with Vercel's hosting. Use webhook-triggered revalidation to keep static pages fresh when content changes.

Quick Start

1. Install the typed client

npm install decoupled-client

2. Generate types from your Drupal schema

npx decoupled-cli@latest schema sync

This introspects your Decoupled.io space and generates schema/client.ts with TypeScript interfaces for every content type, pre-built queries, and a createTypedClient() factory.

3. Fetch content in a Server Component

// app/blog/[slug]/page.tsx
import { createClient } from 'decoupled-client'
import { createTypedClient } from '@/schema/client'
import type { NodeArticle } from '@/schema/client'

const base = createClient({
  baseUrl: process.env.DRUPAL_BASE_URL!,
  clientId: process.env.DRUPAL_CLIENT_ID!,
  clientSecret: process.env.DRUPAL_CLIENT_SECRET!,
  fetch: (url, init) => globalThis.fetch(url, {
    ...init,
    next: { revalidate: 60 },
  }),
})

const client = createTypedClient(base)

export default async function ArticlePage({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  const article = await client.getEntryByPath(`/blog/${slug}`) as NodeArticle

  return (
    <article>
      <h1>{article.title}</h1>
      <p>{article.body?.summary}</p>
      {article.image && (
        <img src={article.image.url} alt={article.image.alt} />
      )}
      <div dangerouslySetInnerHTML={{ __html: article.body?.value ?? '' }} />
    </article>
  )
}

No hand-written GraphQL. No guessing field names. The typed client gives you full autocomplete — article.body is typed as TextSummary (with .value and .summary), not a mystery string. TypeScript catches mistakes at build time, not in production.

Key Features

Type-Safe TypeScript Client

decoupled-client generates TypeScript interfaces that match your actual Drupal schema. Every field autocompletes in your IDE. Text fields are typed as { value: string } — not plain strings — so you never accidentally render [object Object]. Run npx decoupled-cli schema sync after any content model change and your types update automatically. Read the typed client docs.

Visual Page Builder

Decoupled.io includes Puck, an open-source visual editor built with React. Content editors drag and drop components to build pages — and those components map directly to your Next.js component library. No separate design system to maintain.

AI Content Generation

Generate articles, product descriptions, and landing page copy directly in the CMS. AI tools are integrated into the editorial workflow, so content teams can draft, revise, and publish without switching tools.

MCP Tools for Agentic Workflows

Decoupled.io exposes 25+ Model Context Protocol (MCP) tools that let AI agents create content, manage media, configure content types, and publish — all through a structured API. Use them with Claude, GPT, or any MCP-compatible agent to automate content operations at scale.

How It Works

The architecture separates concerns cleanly:

Decoupled.io (Drupal Backend)
  → Content modeling, editorial UI, media management
  → Schema introspection generates your typed client

Next.js (Frontend)
  → Server Components fetch data via typed client
  → Full TypeScript autocomplete from your schema
  → Deployed to Vercel, Netlify, or any Node.js host

Webhooks
  → Content changes trigger on-demand revalidation
  → Static pages update without a full rebuild

Your content team works in a purpose-built editorial interface. Your development team works in Next.js with full TypeScript support. Neither team blocks the other.

Get Started

Ready to connect Decoupled.io to your Next.js application?

Read the docs — set up your Decoupled.io instance and configure API access in under 10 minutes.
Typed client guide — learn how decoupled-client gives you type-safe content fetching with zero GraphQL.
View pricing — choose a plan that fits your project, from solo developers to enterprise teams.

Your Next.js frontend deserves a backend that keeps up. Decoupled.io gives you structured content, type-safe access, visual editing, and AI-powered tools — without the complexity of building it yourself.

Next.js Headless CMS — Decoupled.io