Sanity Notes

create a sanity account and a project (https://www.sanity.io/)

npm create sanity@latest -- --project 39pzvwyl --dataset production --provider google

setting selected:

✔ Fetching existing projects
? Select project to use frontenddotdev
? Select dataset to use production
? Would you like to add configuration files for a Sanity project in this Next.js folder? Yes
? Do you want to use TypeScript? Yes
? Would you like an embedded Sanity Studio? Yes
? Would you like to use the Next.js app directory for routes? Yes
? What route do you want to use for the Studio? /studio
? Select project template to use Clean project with no predefined schemas
? Would you like to add the project ID and dataset to your .env file? Yes

Should get this message:

Success! Your Sanity configuration files has been added to this project

Now we need to run our project pmpm run dev and go to http://localhost:3000/studio

Add http://localhost:3000 to the CORS Origins in the sanity dashboard. We also need to add our url when we deploy this project to production.

Now we need to define a schema for our content.

Let's create a lesson squema:

const lesson = {
  name: 'lesson',
  title: 'Lesson',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string',
    },
    {
      name: 'slug',
      title: 'Slug',
      type: 'slug',
      options: { source: 'title', maxLength: 96 },
    },
    {
      name: 'url',
      title: 'URL',
      type: 'url',
    },
    {
      name: 'image',
      title: 'Image',
      type: 'image',
      options: { hotspot: true },
      fields: [
        {
          name: 'alt',
          title: 'Alt',
          type: 'string',
        },
      ],
    },
    {
      name: 'content',
      title: 'Content',
      type: 'array',
      of: [{ type: 'block' }],
    },
  ],
}

export default lesson

Run npm run dev and go to http://localhost:3000/studio/desk/lesson to create a new lesson.

Now we need to create a query to get the data from sanity.

Create a file lib/sanity.ts:

import { createClient } from '@sanity/client'

side note: how to revalidate data in nextjs

https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating