DEV Community

Odipo Otieno (KwargDevs)
Odipo Otieno (KwargDevs)

Posted on

Sanity CMS - All About It

Here’s an in-depth explanation of the key Sanity concepts and how to use it with front-end frameworks like Next.js and React.js:


1. Sanity Content Studio

Content Studio is where you manage your content visually. It's customizable and built with React, making it flexible for creating different data structures for various types of content.

How to Set Up:

  1. Install Sanity CLI:
   npm install -g @sanity/cli
Enter fullscreen mode Exit fullscreen mode
  1. Initialize a Sanity project:
   sanity init
Enter fullscreen mode Exit fullscreen mode

Follow the prompts to select a project template and choose settings (project name, dataset, etc.).

  1. Start the Content Studio:
   sanity start
Enter fullscreen mode Exit fullscreen mode

This will open the Content Studio at http://localhost:3333. You can now manage your content here.

2. Schemas

Schemas in Sanity define the structure of your content, similar to defining models in a database. You’ll define schemas in the schemas folder of your Sanity project.

Example: Create a Blog Schema

  1. Create a schema file blog.js inside the schemas folder:
   export default {
     name: 'blog',
     title: "'Blog Post',"
     type: 'document',
     fields: [
       {
         name: 'title',
         title: "'Title',"
         type: 'string',
       },
       {
         name: 'body',
         title: "'Body',"
         type: 'portableText', // For rich text fields
       },
       {
         name: 'author',
         title: "'Author',"
         type: 'reference',
         to: [{ type: 'author' }], // Reference to another document type
       },
       {
         name: 'publishedAt',
         title: "'Published At',"
         type: 'datetime',
       },
     ],
   };
Enter fullscreen mode Exit fullscreen mode
  1. Add the schema to schema.js:
   import blog from './blog';
   export default createSchema({
     name: 'default',
     types: schemaTypes.concat([blog]),
   });
Enter fullscreen mode Exit fullscreen mode
  1. Restart the studio to load the new schema:
   sanity start
Enter fullscreen mode Exit fullscreen mode

This schema creates a structure for blog posts, including fields for a title, body, author reference, and published date.


3. Documents

Documents are content entries in Sanity. Once your schemas are defined, you can create documents based on those schemas in the Content Studio.

How to Create a Document in the Studio:

  1. Open your Sanity Studio (http://localhost:3333).
  2. Choose "Blog Post" (or your schema name) from the sidebar.
  3. Fill in the form with content (e.g., title, body, and author) and hit Publish.

4. Portable Text

Portable Text is Sanity’s flexible rich text editor, which allows you to define how different text elements (like images, headings, or custom components) appear in your content.

Using Portable Text in Schema:

  1. In your schema, specify a field as type: 'portableText'.
  2. You can extend Portable Text to include custom blocks:
   export default {
     name: 'body',
     title: 'Body',
     type: 'array',
     of: [
       { type: 'block' }, // Basic block elements like paragraphs
       { type: 'image' }, // Custom image blocks
     ],
   };
Enter fullscreen mode Exit fullscreen mode

5. Sanity Client

The Sanity Client is used in your front-end framework (like React or Next.js) to fetch content from Sanity. It uses GROQ, a querying language designed specifically for Sanity.

Install the Sanity Client:

In your Next.js or React.js project, install the Sanity client:

npm install @sanity/client @sanity/image-url
Enter fullscreen mode Exit fullscreen mode

Set up the Sanity Client:

  1. Create a sanity.js file in your front-end project to configure the client:
   import sanityClient from '@sanity/client';

   export const client = sanityClient({
     projectId: 'yourProjectId', // found in sanity.json or sanity studio
     dataset: 'production',
     apiVersion: '2023-01-01', // use a specific API version
     useCdn: true, // 'false' if you want the latest data
   });
Enter fullscreen mode Exit fullscreen mode

Example GROQ Query:

To fetch blog posts, use GROQ with the client:

import { client } from './sanity';

const query = `*[_type == "blog"]{title, body, publishedAt}`;
const blogs = await client.fetch(query);
Enter fullscreen mode Exit fullscreen mode

You now have all blog posts fetched and can render them in your Next.js or React components.


6. Image Handling

Sanity provides powerful image handling capabilities, allowing you to crop, resize, and optimize images with ease.

Use Image URLs with Transformations:

  1. Install the @sanity/image-url package:
   npm install @sanity/image-url
Enter fullscreen mode Exit fullscreen mode
  1. Set up the image URL builder:
   import imageUrlBuilder from '@sanity/image-url';
   import { client } from './sanity';

   const builder = imageUrlBuilder(client);

   export function urlFor(source) {
     return builder.image(source);
   }
Enter fullscreen mode Exit fullscreen mode
  1. Use in a Next.js or React component:
   import { urlFor } from './sanity';

   const Blog = ({ blog }) => (
     <div>
       <h1>{blog.title}</h1>
       <img src={urlFor(blog.image).width(800).url()} alt="Blog Image" />
     </div>
   );
Enter fullscreen mode Exit fullscreen mode

This example shows how to generate an optimized image URL from Sanity for rendering in your component.


7. Data Relationships

You can create relationships between documents in Sanity by using the reference type. This is useful for linking data like blog authors and their posts.

Example: Author Reference in Blog Post Schema

{
  name: 'author',
  title: 'Author',
  type: 'reference',
  to: [{ type: 'author' }]
}
Enter fullscreen mode Exit fullscreen mode

In the Content Studio, you can then select an author document as a reference while creating a blog post.


8. Real-Time Collaboration

Sanity offers real-time collaboration, where multiple users can work on the same document simultaneously. Changes appear instantly for all users working on the content.

This feature is built into the Sanity Studio automatically, and you don't need to do any special setup to enable it.


9. Integrating Sanity with Next.js/React.js

To integrate Sanity with a Next.js or React.js project, follow these steps:

Example: Fetch Blog Data in Next.js

  1. Use getStaticProps to fetch Sanity data at build time:
   import { client } from '../sanity';

   export async function getStaticProps() {
     const blogs = await client.fetch(`*[_type == "blog"]`);
     return {
       props: { blogs },
     };
   }

   const BlogList = ({ blogs }) => (
     <div>
       {blogs.map(blog => (
         <div key={blog._id}>
           <h2>{blog.title}</h2>
           <p>{blog.body[0]?.children[0]?.text}</p>
         </div>
       ))}
     </div>
   );

   export default BlogList;
Enter fullscreen mode Exit fullscreen mode
  1. In React.js, use useEffect to fetch data dynamically:
   import { client } from './sanity';
   import { useState, useEffect } from 'react';

   const BlogList = () => {
     const [blogs, setBlogs] = useState([]);

     useEffect(() => {
       const fetchBlogs = async () => {
         const data = await client.fetch(`*[_type == "blog"]`);
         setBlogs(data);
       };
       fetchBlogs();
     }, []);

     return (
       <div>
         {blogs.map(blog => (
           <div key={blog._id}>
             <h2>{blog.title}</h2>
             <p>{blog.body[0]?.children[0]?.text}</p>
           </div>
         ))}
       </div>
     );
   };

   export default BlogList;
Enter fullscreen mode Exit fullscreen mode

Summary:

  • Sanity Studio: Manage content visually and customize data structure with schemas.
  • Schemas: Define content structure (documents, objects, references).
  • Portable Text: Flexible rich text editor with support for custom components.
  • Sanity Client: Fetch content using GROQ in React/Next.js.
  • Image Handling: Easily generate optimized image URLs.
  • Data Relationships: Link documents using references.
  • Real-Time Collaboration: Built-in for team workflows.

This setup allows you to efficiently manage, query, and display content in front-end frameworks like Next.js and React.js.

Top comments (0)