In this tutorial, you'll learn how to create various schemas that serve as the data models for a blog. This will be very basic, using Sanity's built-in 'block' type without any customizations. If you're looking for information on creating custom content blocks, such as for embedding YouTube videos or code blocks, you can find that here: [LINK TO ARTICLE].

If you're following along in the series, you should already have a project. If not, the starter project can be found 

. If you have your own existing Sanity project, you shouldn't have any issues following this tutorial either.

Clone the starter project if you need to:

Schemas are built with a combination of 'documents' and 'objects'. Documents are used for the main elements, such as posts, authors, tags, etc. Objects can be used inside of documents as a way to reuse fields, provide additional configurations, and more.

 directory inside the studio directory. In that, create a file called 

. That will, of course, be the schema for authors.

You can use whatever fields you'd like your author schema to have. I'm just going to start with a name, avatar, and bio.

 package. This function takes in an object with our schema definition:

 array. Since we're creating a document, the 

 property must be unique, as this is what the property name will be in the API response. We'll just use 

. This will be shown as the title of the document type in the Studio. Without it, the title will be generated automatically from the 

The fields array will contain all of the fields (crazy, I know) we want to provide data for in the Studio.

For a list of available field types, click 

 array, we can create objects for the data we want our authors to have. Each object requires 

For the first object, we'll create name field of type 

 type. Use string for shorter fields as it will generate a single-line text input. The text type will generate a textarea input, so it's better suited for shorter values.

Follow the same process for the 'bio' field, using the 

. This type comes with additional options. We want to be able to crop our images, so we'll add the 

With all of our fields populated, here is what it should look like now:

If you run your app and go to your Studio, you should now see an Authors field that lets you create new authors.

Now, we're missing a couple important things. We want to be able to access our authors on our website in a readable way, such as at 

http://localhost:3000/authors/chris-jardine

 type, which we can use to generate a url-encoded string from any field we'd like (or you can enter it manually). I like to generate it from the 

 field. To make sure someone can't create an author without a name, we'll add validation to that field.

 field to not be empty and between 4 and 28 characters. We can implement that like so:

 as an option. This means the slug will be generated from the 'name' field. Personally, I like to add it as the first object in the fields array, but feel free to organize your fields any way you'd like.

. We'll keep this simple for the sake of this tutorial. I want to add a slug, title, author, and content body. The slug and title should be easy:

We want to use authors that exists in our database, so this part is a little different. To do this, we'll use the type 

, which will tell Sanity what type to use for the relation. In our case, we want to say the field has a 

Sanity's built-in editor rich text and block content editor is great for writing blogs. That's what I'm using to write this blog. It utilizes portable text, which makes it super easy to present our blog on the front end however we want.

It's also highly customizable. The default editor supports standard HTML headings, blockquotes, bold, italic, underline, strikethrough, code, ordered and unordered lists, and links. However, you can build custom types for the editor. For example, this blog's code blocks with syntax highlighting and tab groups are custom types I created. It's pretty straightforward to do, as the presentation you see is completely decoupled from the schema itself.

Anyway, to use the built-in editor, your field will use the type 

 property whose value is an array of types. We just want to use the type 

 field is where you'll add custom content types.

You should have ended up with the following in your schema files:

Before we can use our schemas, we need to add them to the 

I like to create separate arrays for documents and objects to help clean up the code a little bit. I also use barrel files a lot, so your imports may look a little different. Here's what my file looks like:

This file should already be imported in your 

 file, so you won't have to do anything else. But if you're having issues, it should look like this:

At this point, you can start up your server if it isn't already running and check out your Sanity Studio. You should see something resembling the following:

You can now create your authors and blog posts!

In this tutorial, we covered how to create basic schemas for modeling your data with Sanity. We also covered relations and block content. The process for creating schemas for anything follows this same process, so you should pretty much be able to model anything you want.

Learn to build a blog with Next.js, TypeScript, and Sanity Studio v3. This series will take you from start to finish and offers many helpful tips.

Building a Blog with Next.js, TypeScript, and Sanity Studio v3

Content modeling with Sanity schemas

ESLint allows us to create a set of rules that define our code style. It statically analyzes our code, informing us of a variety of issues as we're writing code, including syntax errors.

, select the options to use TypeScript and  ESLint. Since version 11, Next.js comes with ESLint preinstalled and preconfigured.

If you’re working on an existing project, install the ESLint plugin for Next.js:

Since we’re using TypeScript, we can add additional, TypeScript-specific, configurations for ESLint. Install the following packages:

ESLint comes with a lot of different rules, which you can view 

. Additionally, TypeScript ESLint provides us with more rules, which you can view 

Fortunately, both ESLint and TypeScript ESLint come with recommended configurations that can easily be added to the 

"plugin:@typescript-eslint/recommended-requiring-type-checking"

, isn’t required, but highly recommended. It adds rules that require type information, making our linting process much more robust. It comes at a performance cost, however. But we’re using TypeScript for a reason, and it just makes sense to accept the penalty. You can read more about that 

, which you should be, you need to make a couple additional changes to your ESLint config. Add the following properties:

First, we set the ESLint parser to the parser used by TypeScript ESLint. Then we told the parser where to find our 

 file is located elsewhere or has a different extension.

If you don’t add this additional configuration, you won’t see your linting-related warnings and errors in your files. Additionally, trying to lint your project will result in the following error:


Error while loading rule '@typescript-eslint/await-thenable': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.

This step is optional, but highly recommended. Add the following rules to the 

The recommended configuration already includes these two rules, but they’re set to 

 will prevent us from building our project. The 

 rule refers to variables the have been declared but not used. Get rid of them if you aren’t using them. The 

 rule refers to anything you use the type 

 type essentially means you don't want to use TypeScript.

Whereas ESLint helps us with code style, it’s not necessarily meant to handle code formatting. This is where we use Prettier. If you haven’t already, install the Prettier VS Code extension.

 file at the root of your project. This will contain the Prettier configuration specific to your project. I've included an example configuration below, but additional Prettier options can be found 

In some cases, Prettier rules can conflict with ESLint rules. The 

 package can be used to disable these rules:

 property in your ESLint config file. Make sure it’s last in the array so it can override the other configurations:

Next, we can set up VS Code to automatically fix our linting and formatting errors.

Configure VS Code's settings for Prettier

 at the root of your project and add the following code:

This will set the default formatter to Prettier and run it when you save a file or paste something into it. It also contains an action to fix all auto-fixable ESLint errors on save. Feel free to adjust these options to your liking.

Here's a complete example of what your code should look like:

Good job making it this far—your future self thanks you! We learned how to set up ESLint and TypeScript ESLint in Next.js, which specifies a lot of rules about how our code should be written. We also learned how to set up Prettier to work alongside ESLint to format our code and how to have VS Code perform some of this automatically. With individual configuration files for each, we make sure that anyone working on our project will be forced to use the coding style we want enforced.

Configuring ESLing and Prettier with Next.js

Configuring ESLint and Prettier in Next.js with TypeScript

Learn how to create a starter project with Next.js, TypeScript, Sanity Studio v3, and Chakra-UI. This guide assumes you already know how to use Next.js.

Feel free to use any other component library or technology, if any, for your front end. Chakra-UI is great, but other options include 

. If you want something less opinionated and prefer styling with class names over props, 

The next two prompts ask if you want to use TypeScript and ESLint. Select 

Once complete, open the project in VS Code:

Optional: If you're adding TypeScript to an existing project

If you're following this guide with an existing project, create a file called 

 at the root of your project. When you run 

, installation instructions will be shown to set up TypeScript. Once done, change your 

Note: depending on your setup, you may not be able to convert some config files. That's fine, just leave them as they were.

Optional: Configure ESLint, TypeScript ESLint, and Prettier

This is optional, but I highly recommend that you don't skip this step. You'll be glad to have them set up. I have a separate article outlining how to do this, which you can find 

When I start a new project, the first thing I like to do is remove the unnecessary boilerplate provided by Next.js. Fortunately, there's a lot less than there used to be.

. Personally, I prefer using arrow functions, so I delete everything and create a new arrow function.

If you're using Chakra-UI or some other component library, you won't need CSS modules. You can delete 

Depending on the version of Next.js you're using, you may also have unneeded assets in the 

If you followed along, the files we changed now look like this:

The great thing about Sanity Studio v3 is that we can embed the Studio directly in our Next.js project rather than running it on a separate server. Unfortunately, I've not come across a way to create Sanity projects without having it output a project, so we have to do that and then delete the project. Make sure to follow along though, as there are a couple files we're going to take from the output project first just to make our lives a little easier.

Since Sanity Studio v3 isn't officially released, we need to install it with the 

: Log in using whichever provider you used to create your Sanity account. If you don't have one, create one first 

: We want to create a new project. I named mine 

 since I'm going to be building off this starter to create this blog :)

Use the default dataset configuration: yes

: Just use the preset output path because we'll be deleting it anyway.

Select project template: Clean project with no predefined schemas

Package manager to use for installing dependencies: npm

You'll now have a new directory in your project with the name of whatever you chose for the name is step 4.

 directory at the root of your project and another directory inside it called 

 files at the root of your project there as well.

Now you can delete the rest of the generated Sanity folder. Your project should now contain the following structure:

 file in the project we deleted, you probably noticed that it included some dependencies that we don't have. We need them, so install them now:

 property of your ESLint configuration file.

 in the configuration object. This is the route we use to access the Studio in the browser. Feel free to adjust it if you want.

To be able to query Sanity, we need to have a client configured with our project details. We'll use the 

. I like to keep everything Sanity related here, but feel free to move things around in a way that fits your structure.

. We spread our previously created configuration file in the object and add the 

 is an optional, but recommended, option that will allow Sanity to respond with cached data, which results in faster performance . You can read more about it 

 is optional, but highly recommended and will result in a warning if it's not set. Simply put, set it to the date that you start your project. Your project will use the API in its state from that date, so future updates to the API won't mess up your project.

The client can now be used to make requests!

, we need to create a new directory in the 

Ultimately, the Studio will generate many routes and it's impossible to hardcode them. Next.js makes this super easy to handle. All we need to do is create a single file inside the 

 and any other route the Studio comes up with.

In the route file, add the following code:

 file. Then reinstall your dependencies with 

If you get here, great! Chances are, you've seen several variations of CORS-related errors in the past. They can be annoying and frustrating to fix, but this one is easy!

When you create a new Sanity project, Sanity automatically creates a CORS origin host at 

. If you've used Sanity before, you know that's where you'd normally access your Studio. In our case, we're no longer running a separate server because the Studio is built right into our project. So, unless you've changed it, you Next.js project should be running on port 

All you have to do is go to your project's API settings at 

 (or whatever port your Next.js server is running on). Check the box next to 

Now the Studio is working! You should see a note with the title 

, and you can even create some of your own. That's beyond the scope of this guide, but there's one plugin we want installed on our starter project.

To be able to query our data from within the Studio, we need to add the Studio Vision plugin:

 tag here will install the v3-ready version of the plugin.

 properties are optional, but make sure the values match your setup if you use them.

Now, when you go to your Studio, you should see a button labeled 

At this point, the starter can be pushed to GitHub and be cloned. To clean things up a bit, go to the 

 properties to empty strings. These will need to match the Sanity project being worked on, so there's no sense in leaving your project's settings in the public repo. Don't worry if you accidentally commit your 

, though, as they're considered publicly accessible anyway.

To use the starter, I would use the following process:

Update the CORS origins on the Sanity website and copy the 

 from the interface. You should already know the dataset name, but you can also find that on the website. Enter those values into 

This part is easy, but I like to include it in my starter so I don't have to do it every time.

A web development blog focusing on Next.js, React, TypeScript, and More

Latest posts

Content modeling with Sanity schemas

Configuring ESLint and Prettier in Next.js with TypeScript

Creating a starter project with Next.js, TypeScript, Sanity Studio v3, and ChakraUI

A .css-1xvt9jb{background:linear-gradient(to right, #6253EA, #68D8D6);color:transparent;-webkit-background-clip:text;background-clip:text;}web development blog focusing on Next.js, React, TypeScript, and More

Latest posts

Content modeling with Sanity schemas

Configuring ESLint and Prettier in Next.js with TypeScript

Creating a starter project with Next.js, TypeScript, Sanity Studio v3, and ChakraUI

A web development blog focusing on Next.js, React, TypeScript, and More