Issue with post body not showing in a blog website created using Sanity+Next template.

Based on your issue, this is almost certainly a problem with how the Portable Text body content is being rendered. The fact that simple fields like title and author show up fine, but the body doesn't, is a classic sign that you're missing the proper PortableText component setup.

The Problem

Portable Text (which is what Sanity uses for rich text fields like blog post bodies) is stored as a special JSON structure. You can't just display it directly like a string - you need a special component to render it properly.

The Solution

You need to use the @portabletext/react library to render the body content. Here's how to set it up:

1. Install the package:

npm install @portabletext/react

2. Import and use the PortableText component:

In your blog post page/component, import the component:

import { PortableText } from '@portabletext/react'

3. Render the body field:

Replace wherever you're trying to display post.body with:

<PortableText value={post.body} />

Complete Example

Your post component should look something like this:

import { PortableText } from '@portabletext/react'

export default function Post({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <p>By {post.author}</p>
      
      {/* This is the key part - use PortableText for the body */}
      <PortableText value={post.body} />
    </article>
  )
}

Make Sure Your Query Includes the Body

Also double-check that your GROQ query is actually fetching the body field. It should look something like:

*[_type == "post" && slug.current == $slug][0] {
  title,
  author,
  body  // Make sure this is included!
}

Custom Styling (Optional)

If you want to style the rendered content, you can pass custom components to control how different elements render:

const components = {
  block: {
    h1: ({children}) => <h1 className="text-4xl font-bold">{children}</h1>,
    normal: ({children}) => <p className="my-4">{children}</p>
  },
  marks: {
    link: ({value, children}) => <a href={value.href} className="text-blue-500">{children}</a>
  }
}

<PortableText value={post.body} components={components} />

This is covered in detail in the ultimate guide for customising Portable Text.

Try adding the PortableText component and let us know if that fixes it! If you're still having issues, share your code where you're trying to render the body and we can help debug further.