typescript example blog rendering of text, images and youtube videos about react-portabletext

[humbernieto]

Thank you very much for the contribution.

[c-jardine]

Where are you running into issues? A lot of my projects use Next.js and Sanity and I haven't had any problems with the documentation. The only challenging part I think would be building a custom block for YouTube videos. Have you read this article on it?

[humbernieto]

Please share your example I managed to render videos but with the obsolete package

@sanity/block-content-to-react The guide you are giving me is obsolete. I have problems customizing images and links.

[c-jardine]

I just threw something together. There may or may not be a better way to do this, but this is super simple. The article is a perfectly fine starting point. I'm using Studio v3, but I don't recall any major differences in this process if you're on v2.

Sanity

First, create your schema.

export default defineType({
  name: 'video',
  title: 'Video',
  type: 'object',
  fields: [
    {
      name: 'videoId',
      title: 'Video ID',
      type: 'string',
    },
    // ...other information you want to collect (title, video options, etc.)
  ],
});

Then add it to your main schema export like you would for any others.

No example, this is standard Sanity use.

Now add the video type to the array for your block content.

{
  name: 'description',
  title: 'Description',
  type: 'array',
  of: [{ type: 'block' }, { type: 'video' }],
},

Your video object will appear in the block content pane.

Get the ID from your YouTube video and add it to a new video block.

And that's all you need to do from a Sanity standpoint. If that's confusing, you should go back through their docs since that's the very basics.

Next.js and @portabletext/react

I haven't experimented with custom component keys until now--so if I can do it, so can you! :)

Update the PortableText components object to show a custom YouTube embed component

I just installed react-youtube for this:

1. npm i react-youtube

2. Fetch your block content resource from Sanity using whichever method you choose, and pass it to PortableText.

3. Add YouTube component to types object. The key should match the name of the object type we previously created--in this case video. The {value} parameter is the data from that object, so we can easily access the video ID we stored in the videoId field.

import YouTube from 'react-youtube';

// ...
  <PortableText
    value={blockContentFetchedFromSanity}
    components={{
      marks: { ... },
      blocks: { ... },
      // What we're interested in
      types: {
        video: ({value}) => <YouTube videoId={value.videoId} />
      }
    }}
  />
// ...

Celebrate

You should now see the video on your front end!

Let me know if you're confused about any of this, and I'll be happy to point you in the direction of resources.