如何在Sanity PortableText内容中添加换行？Next.js14渲染无换行问题

这是因为PortableText默认不会解析同一段落内的硬换行，得自定义配置来处理，给你两种实用方案：

方案1：用CSS样式直接处理段落换行 #

给PortableText渲染的段落标签加上white-space: pre-line样式，文本里的换行符就会被转换成实际换行：

async function page({params}:{params: { slug: string }}) {
    const data = await getBlog(params.slug);
    
    // 定义自定义组件配置
    const portableTextComponents = {
        block: {
            // 处理普通段落
            normal: ({ children }) => (
                <p style={{ whiteSpace: 'pre-line', margin: '0.5em 0' }}>
                    {children}
                </p>
            ),
            // 其他段落类型（如标题）可按需配置
            h1: ({ children }) => <h1>{children}</h1>,
        },
    };

    return (
        <div>
            <PortableText 
                value={data?.content} 
                components={portableTextComponents} 
            />
        </div>
    )
}

方案2：自定义文本组件拆分换行 #

如果需要更精细的控制，比如单独处理每一行，可以写一个自定义文本组件拆分换行符：

// 自定义文本组件，拆分换行符并插入<br>
const LineBreakText = ({ children }: { children: string }) => {
    return children.split('\n').map((line, idx) => (
        <span key={idx}>
            {line}
            {idx !== children.split('\n').length - 1 && <br />}
        </span>
    ));
};

async function page({params}:{params: { slug: string }}) {
    const data = await getBlog(params.slug);
    
    const portableTextComponents = {
        types: {
            // 处理文本节点
            span: ({ children }) => <LineBreakText>{children}</LineBreakText>,
        },
        block: {
            normal: ({ children }) => <p>{children}</p>,
        },
    };

    return (
        <div>
            <PortableText 
                value={data?.content} 
                components={portableTextComponents} 
            />
        </div>
    )
}

注：如果是在Sanity Studio里按回车新建的独立段落，PortableText默认会渲染成<p>标签，自然会换行；只有同一段落内的硬换行（Shift+回车）才需要上面的处理。

内容的提问来源于stack exchange，提问作者Sreerag Sager