Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

Discussion about using @sanity/block-content-to-react and Next.js for a blog, including setting up a serializer for links.

10 replies
Last updated: Oct 19, 2021
What is the best way to GROQ out 
Body
for the blog, like [list, mark, bold text, etc]? Do i have to 
body.map(b => b.children
or there is easy way?
Oct 16, 2021, 6:16 PM
Will 
npm install --save @sanity/block-content-to-react
work with nextjs as well?
Oct 18, 2021, 6:33 PM
Will 
npm install --save @sanity/block-content-to-react
work with nextjs as well?
Oct 18, 2021, 6:33 PM
If you're using Next, I recommend using next-sanity . It's a great toolkit and has some good examples of usage in its readme.
Oct 18, 2021, 6:36 PM
Great! it did work with line of code 
import SanityPortableText from '@sanity/block-content-to-react';
though i wonder what is 
usePreviewSubscription
? how to do i make link as pure html like blue color.
Oct 18, 2021, 7:13 PM
Use Preview Subscription will be for if you set up live previews of your content inside of the sanity Studio. To make an 
<a>
tag, you would have to set up a serializer for the block. How do you currently have it set up in your Portable Text editor?
Oct 18, 2021, 7:30 PM
It look something like that:// schema.js

export default {
  name: 'body',
  type: 'array',
  title: 'Body',
  of: [
    {
      type: 'block'
    }
  ]
}
// blockContent.js

/**
 * This is the schema definition for the rich text fields used for
 * for this blog studio. When you import it in schemas.js it can be
 * reused in other parts of the studio with:
 *  {
 *    name: 'someName',
 *    title: 'Some title',
 *    type: 'blockContent'
 *  }
 */
export default {
  title: 'Block Content',
  name: 'blockContent',
  type: 'array',
  of: [
    {
      title: 'Block',
      type: 'block',
      // Styles let you set what your user can mark up blocks with. These
      // correspond with HTML tags, but you can set any title or value
      // you want and decide how you want to deal with it where you want to
      // use your content.
      styles: [
        { title: 'Normal', value: 'normal' },
        { title: 'H1', value: 'h1' },
        { title: 'H2', value: 'h2' },
        { title: 'H3', value: 'h3' },
        { title: 'H4', value: 'h4' },
        { title: 'Quote', value: 'blockquote' },
      ],
      lists: [{ title: 'Bullet', value: 'bullet' }],
      // Marks let you mark up inline text in the block editor.
      marks: {
        // Decorators usually describe a single property ā€“ e.g. a typographic
        // preference or highlighting by editors.
        decorators: [
          { title: 'Strong', value: 'strong' },
          { title: 'Emphasis', value: 'em' },
        ],
        // Annotations can be any object structure ā€“ e.g. a link or a footnote.
        annotations: [
          {
            title: 'URL',
            name: 'link',
            type: 'object',
            fields: [
              {
                title: 'URL',
                name: 'href',
                type: 'url',
              },
            ],
          },
        ],
      },
    },
    // You can add additional types here. Note that you can't use
    // primitive types such as 'string' and 'number' in the same array
    // as a block type.
    {
      type: 'image',
      options: { hotspot: true },
    },
  ],
}
Oct 18, 2021, 7:34 PM
It look something like that:// schema.js

export default {
  name: 'body',
  type: 'array',
  title: 'Body',
  of: [
    {
      type: 'block'
    }
  ]
}
// blockContent.js

/**
 * This is the schema definition for the rich text fields used for
 * for this blog studio. When you import it in schemas.js it can be
 * reused in other parts of the studio with:
 *  {
 *    name: 'someName',
 *    title: 'Some title',
 *    type: 'blockContent'
 *  }
 */
export default {
  title: 'Block Content',
  name: 'blockContent',
  type: 'array',
  of: [
    {
      title: 'Block',
      type: 'block',
      // Styles let you set what your user can mark up blocks with. These
      // correspond with HTML tags, but you can set any title or value
      // you want and decide how you want to deal with it where you want to
      // use your content.
      styles: [
        { title: 'Normal', value: 'normal' },
        { title: 'H1', value: 'h1' },
        { title: 'H2', value: 'h2' },
        { title: 'H3', value: 'h3' },
        { title: 'H4', value: 'h4' },
        { title: 'Quote', value: 'blockquote' },
      ],
      lists: [{ title: 'Bullet', value: 'bullet' }],
      // Marks let you mark up inline text in the block editor.
      marks: {
        // Decorators usually describe a single property ā€“ e.g. a typographic
        // preference or highlighting by editors.
        decorators: [
          { title: 'Strong', value: 'strong' },
          { title: 'Emphasis', value: 'em' },
        ],
        // Annotations can be any object structure ā€“ e.g. a link or a footnote.
        annotations: [
          {
            title: 'URL',
            name: 'link',
            type: 'object',
            fields: [
              {
                title: 'URL',
                name: 'href',
                type: 'url',
              },
            ],
          },
        ],
      },
    },
    // You can add additional types here. Note that you can't use
    // primitive types such as 'string' and 'number' in the same array
    // as a block type.
    {
      type: 'image',
      options: { hotspot: true },
    },
  ],
}
Oct 18, 2021, 7:34 PM
Got it! This guide (specifically the part about rendering the links with React ) will show you which serializer you need to set up.
Oct 18, 2021, 7:35 PM
Hi Racheal! i have little problem here, when i select few line that i want to be 
h1
as you seen in the screenshot, some other text also get effected by and bigger as 
h1
, i only want the selected text to be 
h1
any clue why? šŸ™‚ only the bold text is working.
Oct 19, 2021, 6:28 PM
And he 
H1
text is not 
h1
in my frontend.
Oct 19, 2021, 6:31 PM

Sanityā€“ build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?