Next.js + Contentful 富文本中HTML内容渲染方案问询

方案1：通过Contentful富文本渲染器自定义节点映射（推荐） #

Contentful富文本以结构化JSON返回，我们可以通过@contentful/rich-text-react-renderer配置自定义渲染规则，将富文本中的特定样式或节点转换为带内联样式的<span>。

步骤1：安装依赖 #

npm install @contentful/rich-text-react-renderer @contentful/rich-text-types

步骤2：配置渲染规则 #

假设你在Contentful富文本编辑器中给目标文本添加了自定义标记（比如命名为large-text），可通过以下代码映射到带样式的span：

import { documentToReactComponents } from '@contentful/rich-text-react-renderer';
import { MARKS } from '@contentful/rich-text-types';

const renderOptions = {
  renderMark: {
    // 对应Contentful中创建的自定义标记名称
    'large-text': (text) => <span style={{ fontSize: '18px' }}>{text}</span>,
    // 可同时处理内置标记，比如粗体
    [MARKS.BOLD]: (text) => <strong>{text}</strong>,
  },
};

// 封装成组件复用
export default function RichTextRenderer({ content }) {
  return <div>{documentToReactComponents(content, renderOptions)}</div>;
}

步骤3：在Contentful后台配置标记 #

1. 进入你的Contentful空间 → 设置 → 标记
2. 创建新标记，名称设为large-text（需和代码中的key完全对应）
3. 在富文本编辑器中选中文本，应用该标记即可

方案2：直接渲染HTML内容（需注意安全） #

如果需要直接存储<span style="font-size:18px">View</span>这类HTML代码：

步骤1：在Contentful中添加字段 #

创建一个短文本或长文本字段（不要用富文本字段），专门用于存储HTML内容。

步骤2：在Next.js中渲染 #

使用React的dangerouslySetInnerHTML渲染：

export default function HtmlRenderer({ htmlContent }) {
  // 仅在完全信任HTML内容来源时使用，避免XSS攻击
  return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;
}

⚠️ 警告：此方式存在XSS风险，禁止用于用户提交的未过滤内容。

方案3：Contentful自定义扩展（高级场景） #

如果需要在富文本编辑器中直接插入带样式的HTML，可开发Contentful自定义扩展，实现编辑器内的HTML插入功能。此方案适合复杂定制需求，需额外开发工作。

内容的提问来源于stack exchange，提问作者mhelp.dev