Error while connecting sanity content lake to frontend

Question

I'm getting an error while fetching blogs from sanity to my template, I'm creating a next.js website

Error: Error: Unknown block type "undefined", please specify a serializer for it in the serializers.types prop

<PortableText
  // Pass in block content straight from Sanity.io
  content={blogs[0].content}
  projectId="oeqragbg"
  dataset="production"
  // Optionally override marks, decorators, blocks, etc. in a flat
  // structure without doing any gymnastics
  serializers = {{
    h1: (props) => <h1 style={{ color: "red" }} {...props} />,
    li: ({ children }) => <li className="special-list-item">{children}</li>,
  }}
/>

export async function getServerSideProps(context) {
  const client = createClient({
    projectId: 'oeqragbg',
    dataset: 'production',
    useCdn: false
  });
 
  const query = '*[_type == "blog"]';
  const blogs = await client.fetch(query);
  return {
    props: {
      blogs
    }
  }
}

Answer 1

Are you using the @portabletext/react package? This is how you would use it:

import {PortableText} from '@portabletext/react'

const myPortableTextComponents = {
  block: {
    h1: ({children}) => <h1 style={{ color: "red" }}">{children}</h1>
  },
  listItem: {
    bullet: ({children}) => <li className="special-list-item">{children}</li>,
  },
}

<PortableText
  value={blogs[0].content}
  components={myPortableTextComponents}
/>