Get help on Discord

How to render Sanity rich text (Portable Text) array in React component?

10 replies
Last updated: Nov 29, 2025
hi guys,
I have this piece of content type that is a rich text:

   {
            name: "info",
            title: "Info",
            type: "array",
            of: [
                {
                title: "Block",
                type: "block",
                styles: [{title: "Normal", value: "normal"}],
                lists: [],
            },
and I need to render this on my homepage, how do I render this in here:

export async function getStaticProps ({preview = false}) {
  const product = await getClient(preview).fetch(groq`
    *[_type == 'product']{
      name,
      sku,
      image,
      finish,
      info,
    }[0]`)

  return {
      props: {
        product,
      },
    }
}
AI Update

You'll need to use the @portabletext/react library to render that rich text content in your Next.js app. Here's how to set it up:

First, install the library:

npm install @portabletext/react

Then in your component, import and use the PortableText component:

import { PortableText } from '@portabletext/react'

export default function Product({ product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <PortableText value={product.info} />
    </div>
  )
}

export async function getStaticProps ({ preview = false }) {
  const product = await getClient(preview).fetch(groq`
    *[_type == 'product']{
      name,
      sku,
      image,
      finish,
      info,
    }[0]`)

  return {
    props: {
      product,
    },
  }
}

The basic implementation is that simple! The PortableText component takes your info array and automatically renders it as proper HTML.

If you want to customize how the content looks, you can pass custom components:

const components = {
  block: {
    normal: ({children}) => <p className="my-custom-paragraph">{children}</p>,
  },
  marks: {
    strong: ({children}) => <strong className="font-bold">{children}</strong>,
  }
}

<PortableText value={product.info} components={components} />

Note: If you're using the older @sanity/block-content-to-react library anywhere, you should migrate to @portabletext/react as it's the modern, officially supported version. The main difference is that the old node prop is now called value.

Show original thread
10 replies

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?