The Best Headless CMS for Next.js

Why Cosmic Is the Best Headless CMS for Next.js

Next.js is the most widely used React framework for production applications. Cosmic is built to pair with it at every layer: App Router, Pages Router, React Server Components, SSG, SSR, and ISR. No proprietary query language, no bridge library, no preview server to deploy. Just a clean REST API and a TypeScript SDK that works everywhere Next.js runs.

---

Getting Started: Next.js App Router

Install the SDK

npm install @cosmicjs/sdk

Add environment variables

# .env.local
COSMIC_BUCKET_SLUG=your-bucket-slug
COSMIC_READ_KEY=your-read-key

Create a reusable client

// lib/cosmic.ts
import { createBucketClient } from '@cosmicjs/sdk'

export const cosmic = createBucketClient({
  bucketSlug: process.env.COSMIC_BUCKET_SLUG as string,
  readKey: process.env.COSMIC_READ_KEY as string,
})

---

Fetching Content in React Server Components

Next.js App Router Server Components run on the server and can fetch data directly, with no useEffect, no getServerSideProps, and no client-side waterfall:

// app/blog/page.tsx
import { cosmic } from '@/lib/cosmic'

export default async function BlogPage() {
  const { objects: posts } = await cosmic.objects
    .find({ type: 'blog-posts' })
    .props('id,title,slug,metadata.teaser,metadata.image')
    .sort('-created_at')
    .limit(10)

  return (
    <main>
      <h1>Blog</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <a href={`/blog/${post.slug}`}>{post.title}</a>
            <p>{post.metadata.teaser}</p>
          </li>
        ))}
      </ul>
    </main>
  )
}

Single post with dynamic routing

// app/blog/[slug]/page.tsx
import { cosmic } from '@/lib/cosmic'

export async function generateStaticParams() {
  const { objects: posts } = await cosmic.objects
    .find({ type: 'blog-posts' })
    .props('slug')

  return posts.map((post) => ({ slug: post.slug }))
}

export default async function BlogPost({
  params,
}: {
  params: { slug: string }
}) {
  const { object: post } = await cosmic.objects
    .findOne({ type: 'blog-posts', slug: params.slug })
    .props('id,title,slug,metadata')

  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.metadata.content }} />
    </article>
  )
}

---

Pages Router: getStaticProps and getServerSideProps

Cosmic works identically with the Pages Router:

// pages/blog/index.tsx
import { GetStaticProps } from 'next'
import { cosmic } from '@/lib/cosmic'

export const getStaticProps: GetStaticProps = async () => {
  const { objects: posts } = await cosmic.objects
    .find({ type: 'blog-posts' })
    .props('id,title,slug,metadata.teaser')
    .sort('-created_at')

  return {
    props: { posts },
    revalidate: 60, // ISR: revalidate every 60 seconds
  }
}

export default function Blog({ posts }) {
  return (
    <main>
      {posts.map((post) => (
        <div key={post.id}>
          <a href={`/blog/${post.slug}`}>{post.title}</a>
        </div>
      ))}
    </main>
  )
}

---

Calling the REST API Directly

No SDK needed for simple fetches. Cosmic's REST API works from any fetch call:

// Using Next.js fetch with revalidation
const res = await fetch(
  `https://api.cosmicjs.com/v3/buckets/${process.env.COSMIC_BUCKET_SLUG}/objects` +
  `?type=blog-posts&status=published&limit=10&read_key=${process.env.COSMIC_READ_KEY}`,
  { next: { revalidate: 3600 } } // Next.js cache with 1-hour revalidation
)
const { objects: posts } = await res.json()

This integrates natively with Next.js 14+ fetch caching and revalidation.

---

On-Demand Revalidation

Use Cosmic webhooks to trigger Next.js on-demand revalidation when content changes:

// app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache'
import { NextRequest, NextResponse } from 'next/server'

export async function POST(request: NextRequest) {
  const { slug } = await request.json()
  
  // Revalidate the specific blog post path
  revalidatePath(`/blog/${slug}`)
  revalidatePath('/blog') // Also revalidate the index
  
  return NextResponse.json({ revalidated: true })
}

Configure a Cosmic webhook to POST to /api/revalidate on object publish. Your site updates instantly when editors publish new content, without a full rebuild.

---

Rendering imgix Images with next/image

Cosmic stores all media on imgix. Use Next.js's built-in <Image> component for automatic optimization:

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'imgix.cosmicjs.com',
      },
    ],
  },
}

import Image from 'next/image'

// Render a Cosmic image with optimization
<Image
  src={post.metadata.image.imgix_url}
  alt={post.title}
  width={1200}
  height={630}
  priority
/>

// Or use imgix URL parameters for custom transforms
<Image
  src={`${post.metadata.image.imgix_url}?w=1200&auto=format,compress`}
  alt={post.title}
  fill
  sizes="100vw"
/>

---

Why Next.js Teams Choose Cosmic

No Proprietary Query Language

Sanity requires you to learn GROQ. Cosmic uses standard REST URL parameters. Developers who know HTTP know the Cosmic API already.

App Router and Server Components, First-Class

Cosmic's SDK is async-first and works natively in Server Components. Fetch data, render HTML, ship it to the browser. No client-side hydration overhead for content that does not need interactivity.

Content Modeling Without Code

Add a field to your content type in the Cosmic dashboard. It appears in the API immediately. No TypeScript interface updates, no migration scripts, no redeployment required.

AI Agents Built In

Cosmic's AI Agents create and manage your Next.js app's content automatically. Schedule a Content Agent to research and draft blog posts weekly. Use a Code Agent to commit SEO improvements to your Next.js repository. The CMS handles both the content and the code.

MCP Server for AI Coding Tools

Cosmic's MCP Server connects your bucket to Cursor, Claude Code, GitHub Copilot, and other AI development tools. Write your Next.js components while your AI assistant queries Cosmic for the real content types and field names. No more hallucinated schema.

---

Pricing

Pricing verified April 2026.

Additional users: $29/user/month. Free plan is forever free, no credit card required.

View full pricing →

---

What Real Teams Say

"Cosmic is: us never having to ask a developer to change anything on the backend of our website."

Maximilian Wuhr, Co-Founder at FINN

FINN uses Cosmic to power their marketing site, giving editors full content autonomy. No developer involvement needed for content changes.

---

Start Building Free

Start building for free → — No credit card required.

Evaluating Cosmic for a production Next.js app? Book a 30-minute demo with Tony →

---

Related resources:

• Headless CMS for React
• Headless CMS for Astro
• Best Headless CMS
• CMS for Developers
• Cosmic Docs →