Package Installations

To begin working with Sanity.io, you’ll first need to install the necessary packages. Sanity.io is a headless CMS that lets you manage and deliver structured content through APIs, and setting it up requires a few basic steps. To start, you’ll need to install the Sanity CLI (Command Line Interface) on your machine. This can be done via npm with the following command:

1npm install -g @sanity/cli

Once you’ve installed the CLI, you can use it to create and manage projects. For example, you can initialize a new Sanity project by running:

1sanity init

This command will guide you through setting up your project, allowing you to choose a dataset, and install any required dependencies for your project’s specific schema or configuration. Additionally, you’ll need to install any necessary client packages or SDKs for your application, such as @sanity/client to interact with Sanity’s API.

Schemas

Schemas in Sanity.io define the structure of your content. A schema tells Sanity how your data should be organized and validated, essentially acting as the blueprint for your content types (e.g., blog posts, products, authors). Sanity provides a flexible, JavaScript-based schema system that allows you to define fields, field types, and validation rules for each content type.

In a typical project, schemas are defined in a schemas directory in your Sanity Studio. Each schema is a JavaScript object that specifies the name of the content type, fields, and their types. Here’s an example of a simple schema for a blog post:

1export default {
2  name: 'blogPost',
3  title: 'Blog Post',
4  type: 'document',
5  fields: [
6    {
7      name: 'title',
8      title: 'Title',
9      type: 'string',
10    },
11    {
12      name: 'content',
13      title: 'Content',
14      type: 'text',
15    },
16    {
17      name: 'publishedAt',
18      title: 'Published Date',
19      type: 'datetime',
20    },
21  ],
22};
23

Querying

Querying Sanity’s content is a key part of interacting with the platform. Once you've set up your schemas and populated your content, you’ll need to retrieve it using queries. Sanity provides an API to query your data, allowing you to fetch content based on specific criteria, such as a particular author, category, or date.

Sanity uses GROQ (Graph-Relational Object Queries) to query data. This language is similar to GraphQL, but it's tailored specifically to Sanity’s document-based data structure. It allows you to fetch deeply nested content and filter it according to your needs.

For example, a basic query to fetch all blog posts might look like this:

1const query = '*[_type == "blogPost"]';

GROQ Query Language

GROQ (Graph-Relational Object Queries) is the query language used by Sanity.io to retrieve content from the platform. It is specifically designed for Sanity’s document-based architecture, where content is structured as a series of documents with nested fields. GROQ allows for powerful queries with capabilities such as:

Filtering: Narrow down your results based on specific criteria (e.g., fetch all blog posts published after a certain date).

Sorting: Sort results by a specific field or value (e.g., get posts ordered by their published date).

Projections: Specify which fields to include or exclude from the query results (e.g., return only titles and authors).

Join-like operations: Reference other documents and query related data (e.g., fetch all posts written by a specific author).

Here’s an example of a GROQ query to fetch all blog posts with the title and publication date, sorted by date:

1const query = '*[_type == "blogPost"] | order(publishedAt desc) { title, publishedAt }';

Sanity Fetch

Sanity Fetch is a method used to retrieve data from Sanity’s API in your frontend application. Once you’ve defined your GROQ query, you can use Sanity’s JavaScript client to execute the query and fetch the data.

To use Sanity Fetch, you first need to install the Sanity Client package

1npm install @sanity/client

Then, initialize the client with your project ID and dataset:

1import sanityClient from '@sanity/client';
2
3const client = sanityClient({
4  projectId: 'yourProjectId',
5  dataset: 'yourDataset',
6  useCdn: true,
7});
8

With the client set up, you can use it to fetch data from your Sanity project:

1client.fetch('*[_type == "blogPost"]')
2  .then(posts => {
3    console.log(posts);
4  })
5  .catch(err => {
6    console.error('Query failed: ', err);
7  });
8

Sanity Studio

Sanity Studio is the content management interface for Sanity.io. It provides a highly customizable UI where content creators can easily manage their content. Sanity Studio is built using React, so you can configure and extend it as needed for your specific project. You can create custom input components, modify the layout, and even add custom workflows.

The Sanity Studio is typically initialized in your project via the Sanity CLI and can be customized by editing the files in the studio directory. Here, you can define the content types (schemas), set up structure and navigation, and customize the overall user experience. Sanity Studio also integrates seamlessly with real-time content updates, making it a powerful tool for teams working collaboratively.

Building and Deploying

Once you’ve built your website or web application and integrated Sanity.io as your content backend, you’ll need to deploy it to a server or hosting platform. Sanity itself is a headless CMS, so it doesn’t handle the frontend deployment, but it provides the API that your site will query to fetch content.

For deployment, you can use platforms like Vercel, Netlify, or AWS to host your frontend code. These platforms work well with static site generators (like Next.js), which can pull data from Sanity’s API at build time to generate static pages.

For example, deploying a Next.js app to Vercel is seamless because of its native integration with Sanity.io. After building your site, you can push your project to GitHub, and Vercel will automatically handle the deployment process, including continuous integration and deployment (CI/CD).

To build and deploy your site, simply run:

1next build
2next export

Then, push your code to your chosen hosting platform for automatic deployment.