将 sanity.io 的块输入添加到 next.js 博客文章

Question

我正在使用 sanity.io 在 next.js 上开发博客，但在使用代码输入插件时遇到了问题。

我所拥有的 我可以在理智上使用代码组件块，看起来像这样：

理智方面的一切都很好。我的问题是在 next.js [slug].js 文件上使用它。

我有这个错误提示：

这个问题是我的代码中没有 serializer.js 文件/组件，甚至在工作室根文件夹中也没有。我已经看到这适用于 gatsby，但我不知道如何将它应用于 Next.js

这是我目前拥有的：

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

我真的很感激这里的一些帮助！谢谢

Answer 1

您可以使用 serializers 属性将代码块类型的序列化程序传递给您的 BlockContent。

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}
/>