NEXTJS中使用react-markdown无法正确渲染H1、行内代码格式问题求助

问题根因 #

你使用next/dynamic导入remarkGfm、rehypeRaw等插件的方式错误，next/dynamic是Next.js专门用于动态导入React组件的API，无法正确识别导入普通JavaScript函数类的模块，导致初始渲染时插件未加载生效，只有属于基础Markdown语法子集的粗体格式被解析，标题、行内代码等需要插件规则支持的语法就无法正常渲染。

修复方案 #

1. 调整导入逻辑，仅对ReactMarkdown组件使用next/dynamic关闭SSR，所有remark、rehype插件改用普通静态导入：

import dynamic from 'next/dynamic'
// 仅ReactMarkdown为React组件，用dynamic导入关闭SSR
const ReactMarkdown = dynamic(
  () => import("react-markdown").then((mod) => mod.default),
  { ssr: false }
);
// 插件为普通函数，直接静态导入即可
import remarkGfm from 'remark-gfm'
import rehypeRaw from 'rehype-raw'

2. 如果你使用的是Next.js 13+的App Router，需要在当前文件顶部添加'use client'指令，标记该组件为客户端组件，适配useState等客户端API的使用。
3. 原有渲染逻辑无需修改，调整后刷新页面即可看到标题、行内代码格式正常渲染。

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