The next-sanity toolkit

One of the dependencies automatically installed during sanity init in the last lesson was next-sanity, a collection of utilities and conventions for data fetching, live updates, Visual Editing, and more. You could look through the readme for full details on what it provides.

For now, let's examine some of the files that were automatically created in the previous lesson and explain their purpose.

A .env.local file should have been created with your Sanity project ID and dataset name. These are not considered sensitive, and so are appended with NEXT_PUBLIC_.

In future lessons, you'll add secrets and tokens to this file. It is important that you do not check this file in your Git repository. Also, remember that values in this file will need to be recreated when deploying the application to hosting. We'll remind you of this when we get there.

NEXT_PUBLIC_SANITY_PROJECT_ID="your-project-id"
NEXT_PUBLIC_SANITY_DATASET="production"

Additionally, a file to retrieve, export, and confirm these values exist has been written to src/sanity/env.ts

npx sanity@latest init --env

The file client.ts contains a lightly configured instance of Sanity Client.

import { createClient } from 'next-sanity'
import { apiVersion, dataset, projectId } from '../env'

export const client = createClient({
  projectId,
  dataset,
  apiVersion,
  useCdn: true,
})

Sanity Client is a JavaScript library commonly used to interact with Sanity projects. Its most basic function is querying content, but once authenticated with a token, it can interact with almost every part of a Sanity project.

You won't need to change the Sanity Client configuration now, but it is good to know where to make modifications later.

In the file live.ts, the preconfigured client is used to export a function sanityFetch, and the component SanityLive.

import { defineLive } from "next-sanity";
import { client } from "@/sanity/lib/client";

export const { sanityFetch, SanityLive } = defineLive({client});

• sanityFetch is a helper function to perform queries, and under the hood it handles the integration with Next.js tag-based caching and revalidation, as well as Draft Mode.
• SanityLive is a component which creates a subscription to the Live Content API and will automatically revalidate content as it changes.

These two exports are the foundation of "Live by default" experiences in Next.js applications. In future lessons you'll implement these and learn how they work.

The two root files sanity.cli.ts and sanity.config.ts are important for interacting with your project:

• sanity.cli.ts allows you to run CLI commands (like dataset import from the previous lesson) that affect the project while targeting the correct project ID and dataset
• sanity.config.ts is used to configure the Sanity Studio, including schema types, plugins, and more.

npx sanity@latest debug

In the src/sanity/schemaTypes folder are files for the three document types and one custom type which you can see in the Studio.

You're able to create category, post and author type documents because these have been registered to the Studio configuration.

Datasets are schemaless, so data of any shape could be written into a dataset. But these are the only schema types currently configured in the Studio. In future lessons, you'll change and add to these schema types, but they give us enough to work with now.

You now have a Next.js application with an embedded Sanity Studio for creating and publishing content. It's time to start integrating them.

Writing GROQ queries is the most common method of querying content from Sanity. In the next lesson, we'll set up conventions for this.