add block-input from sanity.io to next.js blog post

I’m developing a blog on next.js with sanity.io, and I’m having trouble using the code-input plugin.

What I do have I’m able to use the code component block on sanity, which looks something like this:

Everything good on the sanity side. My problem comes with using it on the next.js [slug].js file.

I have this error prompt out:

This issue with this is that I don’t have a serializer.js file/component anywhere on my code, not even on the studio root folder. I’ve seen this applies for gatsby but I don’t know how to apply it for Next.js

This is what I currently Have:

import groq from 'groq'
import imageUrlBuilder from '@sanity/image-url'
import BlockContent from '@sanity/block-content-to-react'
import client from '../../client'
import Layout from '../../components/layout'
import utilStyles from '../../styles/utils.module.css'
import styles from '../../components/layout.module.css'

function urlFor (source) {
    return imageUrlBuilder(client).image(source)
}

const Post = (props) =>  {
    const {
            title = 'Missing title',
            name = 'Missing name',
            categories,
            authorImage,
            mainImage,
            code,
            body = []
        } = props
        console.log(props)
    return (
        <Layout>
            <article>
                <div className={styles.container}>
                    <figure>
                        <img src={urlFor(mainImage).url()} />
                    </figure>
                    <h1 className={utilStyles.headingXl}>{title}</h1>
                    {categories && (
                        <ul className="inline">
                            Category:
                            {categories.map(category => 
                            <li key={category}>
                               <span className="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-indigo-100 bg-indigo-700 rounded">{category}</span> 
                            </li>)}
                        </ul>
                    )}
                    <BlockContent                
                        blocks={body}
                        imageOptions={{fit: 'max'}}
                        {...client.config()}
                        {...code}
                    />
                </div>
            </article>
        </Layout>
    )
}

const query = groq ` *[_type == "post" && slug.current == $slug][0]{
    title,
    "name": author->name,
    "categories": categories[]->title,
    mainImage,
    code,
    "authorImage": author->image,
    body,
}`

Post.getInitialProps = async function(context) {
    
    const {slug = ""} = context.query
    return await client.fetch(query, { slug })
}

export default Post

I really would appreciate some help here! Thanks <3

Answer

You can pass a serializer for the code block type to your BlockContent using the serializers prop.

const serializers = {
  types: {
    code: props => (
      <pre data-language={props.node.language}>
        <code>{props.node.code}</code>
      </pre>
    )
  }
}

// ...

<BlockContent                
    blocks={body}
    imageOptions={{fit: 'max'}}
    {...client.config()}
    {...code}
    serializers={serializers}
/>

Advertisement

Answer