How to add specific fields to each page in a website built with Sanity, using arrays of objects or reserved IDs, and handling validation with custom rules.

const bodyField = {
  name: 'body',
  title: 'Content',
  type: 'array',
  of: [
    { type: 'blocks' },
    { type: 'contactForm' },
  ],
  validation: Rule => [
    Rule.required()
      .min(1)
      .error('Required field with at least 1 paragraph.'),
    Rule.unique(),
    Rule.custom((blocks, context) => {
      if (context.document.layout === "teamPage") {
        // Warn for contact forms in team pages
        if (!blocks.some(block => block.type === "contactForm")) {
          return "Contact forms don't go well in a team page. Are you sure you want to keep it?"
        }
      }

      return true
    }).warning(),
  ]
}

// Next
import { useRouter } from 'next/router'
import Img from 'next/image'

// Plugins
import { useNextSanityImage } from 'next-sanity-image'
import { NextSeo } from 'next-seo'

// Sanity
import { sanityClient, getClient } from '@lib/sanity.server'
import { usePreviewSubscription, PortableText, urlForImage } from '@lib/sanity'

// Queries
import { routesQuery, routeCurrentQuery } from '@lib/queries'

// Helpers
import { formatDate, formatDateTime } from '@lib/helpers'

const Page = ({ pageData, preview, slug }) => {
   const router = useRouter()

   const { data: { page = {} } = {} } = usePreviewSubscription(routesQuery, {
      params: { slug },
      initialData: pageData,
      enabled: preview || router.query.preview !== null
   })

   const {
      body,
      publishedAt,
      _updatedAt,
      title,
      featuredImage,
      openGraphImage,
      openGraphDescription,
      openGraphAlt,
      author
   } = page

   const SEO = {
      title: title,
      openGraph: {
         title: title,
         description: openGraphDescription,
         url: `<https://wwww/${slug}/>`,
         images: openGraphImage && [
            { url: urlForImage(openGraphImage).url(), alt: openGraphAlt }
         ]
      }
   }

   const imageAttributes = {
      alt: featuredImage?.alt ? featuredImage.alt : '',
      layout: 'responsive',
      sizes: '(max-width: 900px) 100vw, 900px'
   }

   const imageOptions = {
      blurUpImageWidth: 124,
      blurUpImageQuality: 40,
      blurUpAmount: 24
   }

   const imageProps = useNextSanityImage(sanityClient, featuredImage, {
      ...imageOptions
   })

   return (
      <>
         <NextSeo {...SEO} />
         {featuredImage && <Img {...imageProps} {...imageAttributes} />}
         {author && <p>Written by: {author.name}</p>}
         {_updatedAt && <p>Last updated: {formatDateTime(_updatedAt)}</p>}
         {publishedAt && <p>Publish date: {formatDate(publishedAt)}</p>}
         {title && <h1>{title}</h1>}
         {body && <PortableText blocks={body} />}
      </>
   )
}

export const getStaticProps = async ({ params = {}, preview = false }) => {
   const { slug } = params
   const { page: pageData } = await getClient(preview).fetch(routesQuery, {
      slug
   })

   return {
      props: { preview, pageData, slug }
   }
}

export const getStaticPaths = async () => {
   const routes = await getClient().fetch(routeCurrentQuery)

   return {
      paths: routes || null,
      fallback: false
   }
}

export default Page