Strapi富文本内容在Next.js/React前端页面无法正确显示问题求助

问题原因和解决方法 #

核心问题说明 #

React默认会对插入的字符串内容做XSS安全转义，所以Strapi返回的带HTML标签的富文本内容会被当成普通字符串直接展示，不会被解析为页面DOM节点，就会出现标签外露、格式丢失的问题。你遇到的react-markdown导入报错，是因为最新版react-markdown已改为纯ESM模块，低版本Next.js或CommonJS导入方式不兼容导致。

解决方法1：快速适配（适合个人CMS、内容可控的场景） #

直接用React原生的dangerouslySetInnerHTML属性渲染富文本，修改你代码中内容渲染的部分即可：

// 把原来的 {posts.Content} 替换成下面的写法
<div dangerouslySetInnerHTML={{__html: posts.Content}} />

解决方法2：用react-markdown渲染（安全系数更高，适合存在用户输入的场景） #

1. 先安装兼容低版本环境的react-markdown和配套插件：

npm install react-markdown@8 rehype-raw@6

2. 修改页面代码，导入并使用组件：

import ReactMarkdown from 'react-markdown'
import rehypeRaw from 'rehype-raw'

export default function BlogPage({ posts }) {
  return (
    <>
      <div>
        <div>
          {posts.Title}
        </div>
      </div>
      {/* 渲染富文本内容 */}
      <div>
        <ReactMarkdown rehypePlugins={[rehypeRaw]}>
          {posts.Content}
        </ReactMarkdown>
      </div>
      <Carousel />
    </>
  );
}

// 剩下的getStaticPaths、getStaticProps代码不用修改

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