Sanity CMS with Next.js or Astro: Complete Guide

The basic principle

Sanity is a headless CMS: this means that the content administration interface (the backend) is completely separated from the frontend (the site displayed to visitors).

Unlike WordPress, where content and theme are linked, Sanity provides:

1. Structured and custom content

Unlike WordPress where plugins sometimes force you to adapt your content structure to the theme, with Sanity, you define exactly what you need: fields, types, validations, relationships between data.

With Sanity, content is structured as types: pages, sections, articles, projects, testimonials, FAQ...

This approach allows you to build highly customized, truly scalable sites, without workarounds. The content structure is clear, controlled and independent of design.

2. A modern editing interface

Sanity Studio is fast, clear and pleasant to use. When properly configured, it allows non-technical teams to:

• •Edit texts and images
• •Manage pages and content
• •Publish or unpublish content
• •Preview changes in real time

3. A flexible API: GROQ and GraphQL

Sanity allows you to query data via two methods:

• →GROQ (Graph-Relational Object Queries): a query language specific to Sanity, very powerful and flexible
• →GraphQL: if you prefer this standard

GROQ is often preferred for its simplicity and expressive power. You retrieve exactly what you need without overloading queries.

// GROQ query example
const query = `
  *[_type == "page" && slug.current == $slug][0]{
    title,
    description,
    content,
    publishedAt
  }
`;

Sanity is agnostic: it works with any frontend. But Astro and Next.js are particularly well suited because:

A common criticism of headless CMS is that they're "for developers" and unsuitable for non-technical teams. With Sanity, this depends entirely on how the interface is configured.

Here's what makes the difference:

Example of a properly configured schema

export default {
  name: 'page',
  title: 'Page',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: 'Page Title',
      type: 'string',
      description: 'Main title displayed on the page',
      validation: Rule => Rule.required().max(80)
    },
    {
      name: 'slug',
      title: 'URL',
      type: 'slug',
      description: 'Generated from the title',
      options: { source: 'title' },
      validation: Rule => Rule.required()
    },
    {
      name: 'content',
      title: 'Content',
      type: 'array',
      of: [{ type: 'block' }]
    }
  ]
}

Both work perfectly with Sanity. The choice depends on your project:

Here are concrete examples to understand how Sanity integrates with each framework.

Why Next.js (and not Astro)?