Cómo crear una página plana

Una página plana (type: "page") es un documento sin estructura de listado — una página única con secciones configurables y metadatos de SEO. Úsala para páginas como /nosotros, /contacto o /servicios.

Cuándo usar este tipo

Usa page cuando la página:

• No lista sub-documentos (eso es para indexPage)
• Tiene contenido propio construido por secciones
• Necesita su propia URL y SEO independiente

Campos disponibles

El campo sections acepta todos los tipos registrados en sectionsField.of — actualmente baseSection.

Código fuente

// schemas/documents/plainPage.ts
import { defineField, defineType } from "sanity"
import { sectionsField } from "../helpers/sections"
 
export const pageDocument = defineType({
  name: "page",
  title: "Páginas",
  type: "document",
  groups: [
    { name: "content", title: "Contenido", default: true },
    { name: "seo", title: "SEO" },
  ],
  fields: [
    defineField({
      name: "title",
      title: "Título interno",
      type: "string",
      description: "Solo visible en el Studio. Ej: 'Página de contacto'",
      validation: (Rule) => Rule.required(),
      group: "content",
    }),
    defineField({
      name: "slug",
      title: "Slug",
      type: "slug",
      description: "La URL de la página. Ej: 'nosotros' → /nosotros",
      options: { source: "title" },
      validation: (Rule) => Rule.required(),
      group: "content",
    }),
    defineField({
      ...sectionsField,
      group: "content",
    }),
    defineField({
      name: "seo",
      title: "SEO",
      type: "seo",
      group: "seo",
    }),
  ],
  preview: {
    select: { title: "title", slug: "slug.current" },
    prepare: ({ title, slug }) => ({
      title,
      subtitle: slug ? `/${slug}` : "Sin slug",
    }),
  },
})

El campo sections usa el spread ...sectionsField para heredar name, title, type y of del helper, y solo sobreescribe group. Así, si se añade un nuevo tipo de sección al helper, este campo lo recibe automáticamente.

Crear una página en el Studio

1. En el Studio, abre el tipo Páginas en la barra lateral
2. Haz clic en Nuevo documento
3. Ingresa el Título interno (ej: Página — Nosotros)
4. Genera el Slug usando el botón “Generar” o escríbelo manualmente (ej: nosotros)
5. En la pestaña Contenido, añade secciones con el botón “Añadir ítem”
6. En la pestaña SEO, completa los metadatos opcionales
7. Publica el documento

Consulta GROQ para el front-end

// Obtener una página por slug
*[_type == "page" && slug.current == $slug][0] {
  title,
  slug,
  sections[] {
    _type,
    eyebrow,
    heading,
    subheading,
    ctas[] {
      label,
      href,
      variant
    },
    image {
      asset->,
      hotspot,
      crop
    },
    variant
  },
  seo {
    metaTitle,
    metaDescription,
    ogImage,
    noIndex
  }
}

Si necesitas un tipo de documento diferente

Si un proyecto requiere una página con estructura diferente a page — por ejemplo, una página de landing con campos fijos en lugar de secciones flexibles — crea un nuevo archivo en schemas/documents/, define el tipo con defineType siguiendo el mismo patrón, e impórtalo en schemaTypes/index.ts.

No modifiques plainPage.ts si el cambio aplica solo a un proyecto; crea un tipo paralelo en lugar de generalizar.