# The next-sanity toolkit

https://www.sanity.io/learn/course/content-driven-web-application-foundations/the-next-sanity-toolkit.md

Unpack next-sanity, the all-in-one Sanity toolkit for "live by default," production-grade content-driven Next.js applications.

One of the dependencies automatically installed during `sanity init` in the last lesson was [`next-sanity`](https://github.com/sanity-io/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.

## Environment variables

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

1. See the Next.js documentation about [public and private environment variables](https://nextjs.org/docs/app/building-your-application/configuring/environment-variables).

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.

1. **Confirm** you have an `.env.local` file at the root of your application.

```scss:.env.local
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`

1. You can use Sanity CLI to update these values with a new or existing Sanity project by running `sanity init` again with the `--env` flag

```sh
pnpm dlx sanity@latest init --env
```

## Sanity Client

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

```typescript:src/sanity/lib/client.ts
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.

1. See more about what [Sanity Client](https://www.sanity.io/docs/js-client) can do

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

### sanityFetch and SanityLive

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

```typescript:src/sanity/lib/live.ts
import { defineLive } from "next-sanity/live";
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](https://www.sanity.io/learn/content-lake/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.

## Sanity Config and CLI

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.

1. Run the following command to show project details:

```sh
pnpm sanity@latest debug
```

## Schema Types

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.

1. See [Improving the editorial experience](https://www.sanity.io/learn/course/studio-excellence/improving-the-editorial-experience) in [Day one content operations](https://www.sanity.io/learn/course/day-one-with-sanity-studio) to see how basic schema type configurations can be dramatically enhanced.

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.