Integrating Sanity CMS with React Blog for the First Time

export default {
  name: 'post',
  title: 'Blog Post',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string',
      validation: (Rule) => Rule.required(),
    },
    {
      name: 'slug',
      title: 'Slug',
      type: 'slug',
      options: { source: 'title' },
    },
    {
      name: 'publishedAt',
      title: 'Published At',
      type: 'datetime',
    },
    {
      name: 'mainImage',
      title: 'Main Image',
      type: 'image',
    },
    {
      name: 'body',
      title: 'Body',
      type: 'array',
      of: [{ type: 'block' }], // This is Portable Text for rich text
    },
  ],
}

import { createClient } from "@sanity/client";
import imageUrlBuilder from "@sanity/image-url";

export const client = createClient({
  projectId: "your-project-id", // Find this in sanity.json or studio/sanity.config.ts
  dataset: "production",
  apiVersion: "2025-01-01", // Use current date
  useCdn: true, // Set to false for fresh data, true for faster cached data
});

// Helper function for generating image URLs
const builder = imageUrlBuilder(client);
export const urlFor = (source) => builder.image(source);

import { useEffect, useState } from "react";
import { client, urlFor } from "./sanity";
import { PortableText } from "@portabletext/react";

function BlogPosts() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    client
      .fetch(
        `*[_type == "post"] | order(publishedAt desc) {
          _id,
          title,
          slug,
          publishedAt,
          mainImage,
          body
        }`
      )
      .then((data) => setPosts(data))
      .catch(console.error);
  }, []);

  return (
    <div>
      {posts.map((post) => (
        <article key={post._id}>
          <h2>{post.title}</h2>
          {post.mainImage && (
            <img 
              src={urlFor(post.mainImage).width(800).url()} 
              alt={post.title}
            />
          )}
          <PortableText value={post.body} />
        </article>
      ))}
    </div>
  );
}

const ptComponents = {
  types: {
    image: ({value}) => (
      <img src={urlFor(value).url()} alt={value.alt || ''} />
    ),
  },
  marks: {
    link: ({value, children}) => (
      <a href={value.href} target="_blank" rel="noopener">
        {children}
      </a>
    ),
  },
};

// Use it like this:
<PortableText value={post.body} components={ptComponents} />

cd studio
npm run deploy