Sanity.io with Next.JS Step By Step

Sanity.io Step By Step

Step-01:

Go to any browse and search "sanity cli" and go to first search result which will be like that--
"Command Line Interface (CLI) - Sanity Studio" 

Step-02:

# Installing the CLI globally

        --- npm install --global sanity@latest

Step-03:

Create an account on sanity.io by using google or github.

Step-04:

Then click on "Getting Started --- Create Project"

Step-05:

Then open your terminal and create a next js application like that---

        E:\Antor\NextJS> npx create-next-app@latest sanity-blog (exp)

then change the directory and also paste the sanity project url like that---
        E:\Antor\NextJS\sanity-blog> npm create sanity@latest -- --project edmt7oi0 --dataset production --template clean (exp)

Step-06:

Then open visual code studio and run the project by using this command---
        --- npm run dev http://localhost:3000/studio/

Step-07:

Go to browser and type this url to find the sanity admin dashboard for this project---
        --- http://localhost:3000/studio/

Then you face a issue which is cors origin. But it's not a major issue, just click on add origin button and select your auth provider and fix it. 

Step-08:

Go to vs code and find "sanity" folder and open this then create a new folder such as "customSchemas" and create all schemas here like that---

#sanity-> customShcemas-> blogs.ts

import { defineField, defineType } from "sanity";

export const blogs = defineType({

  name: "blogs",

  title: "Blogs",

  type: "document",

  fields: [

    defineField({

      name: "title",

      type: "string",

      title: "Title",

    }),

    defineField({

      name: "category",

      type: "string",

      title: "Category",

    }),

    defineField({

      name: "releaseDate",

      type: "date",

      title: "Release Date",

    }),

    defineField({

      name: "blogThumbnail",

      type: "image",

      title: "Blog Thumbnail",

    }),

  ],

});

Step-09:

After create a schema then you have to need to open "schema.ts" file and import your custom schemas like that ---

import { type SchemaTypeDefinition } from "sanity";

import { blogs } from "./customSchemas/blogs";

export const schema: { types: SchemaTypeDefinition[] } = {

  types: [blogs],

};

Step-10:

Then find your src/app folder and open "page.tsx" file and fetch the sanity data like that ---

import { client } from "../../sanity/lib/client";

const getData = async () => {

  const fetchData = await client.fetch(`*[_type == 'blogs']{

      title,

      category,

      releaseDate,

      "blogThumbnail": blogThumbnail.asset->url

    }`);

    return fetchData;

};

export default async function Home() {

  const data = await getData();

  return (

    <main className="flex min-h-screen flex-col items-center p-24">

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">

        {data.map((blog: any) => (

          <div className="w-full group overflow-hidden relative rounded-md">

            <img src={blog.blogThumbnail} alt="" />

            <h1>{blog.title}</h1>

            <p>{blog.category}</p>

            <p>{blog.releaseDate}</p>

          </div>

        ))}

      </div>

    </main>

  );

}