Sanity Studio Development

Sanity Studio Integration

We make use of sanity.io as a Content Management System (CMS) so that site admins can change the content of the page without requiring code. We have integrated sanity studio (at the /studio path) into our nextjs app using the next-sanity package.

Defining schemas

A schema in sanity allows us to create custom data types that can then be fetched using the GROQ query language for display in our application.

Example - Contact Details:

"Contact Detail" is a custom data type that can be used to display information on the contact page

It has three fields:

• title
• description
• email

The way we make this available in code is as follows:

The following folder structure should be kept for all new schemas

For each new schema create a new folder at:

client\src\models\sanity\[schema name]

For the example it is client\src\models\sanity\ContactDetail. Underneath this path we have:

• client\src\models\sanity\ContactDetail\Schema.ts

export const ContactDetailSchema: SchemaTypeDefinition = {
  name: "contact-detail",
  title: "Contact Detail",
  description:
    "Who users should contact for additional queries - Will be displayed on a contact page",
  type: "document",
  fields: [
    defineField({
      name: "title",
      description: "what the contact details are for - i.e bookings",
      type: "string",
      validation: (v) => v.required()
    }),
    defineField({
      name: "description",
      description:
        "Extra information that the users may need to know - i.e For guest bookings",
      type: "text"
    }),
    defineField({
      name: "email",
      type: "email"
    })
  ]
}

Note

This schema needs to be imported into client\sanity\schema.ts under the types field. To make the schema visible in the studio you will have to also manually add it to client\sanity.config.ts

Afterwards we are able to create new data in the studio route and fetch it in the app. For convenience we should do the following:

• client\src\models\sanity\ContactDetail\Utils.ts

export const CONTACT_DETAIL_GROQ_QUERY = `*[_type == "contact-detail"]` as const

export type ContactDetailItem = {
  title: string
  description?: string
  email?: string
}

Contains a GROQ query and TS type that can be used in the app.

Finally on the contact page we can do the following:

const Page = async () => {
  const contactDetails = await sanityQuery<ContactDetailItem[]>(
    CONTACT_DETAIL_GROQ_QUERY
  )
  return <Contact items={contactDetails} />
}

Important

You must not have "use client" to use async components!

Also make sure that you use sanityQuery instead of the client in client\sanity\lib\client.ts, as client is not compatible with SSG.

Accessing Sanity Studio

You need an account added to the sanity project for staging. Contact the relevant contributors for this information.