Next.js 13中React-Markdown渲染异常及rehypePlugins失效求助

1. 修复标题层级样式失效问题 #

Next.js 13 App Router 默认不会给 <h1>-<h6> 这类标题元素提供层级样式，得手动补充：

• 方法一：在全局样式文件（比如 app/globals.css）中添加基础样式：

  h1 { font-size: 2rem; font-weight: 700; margin: 1.5rem 0; }
  h2 { font-size: 1.75rem; font-weight: 600; margin: 1.25rem 0; }
  h3 { font-size: 1.5rem; font-weight: 600; margin: 1rem 0; }
  /* 按需补充h4-h6的样式 */
  

• 方法二：通过 components 属性自定义标题组件，直接绑定Tailwind类：

  'use client';
  import ReactMarkdown from 'react-markdown';
  
  const MarkdownRenderer = ({ content }: { content: string }) => {
    return (
      <ReactMarkdown
        components={{
          h1: ({ children }) => <h1 className="text-4xl font-bold my-6">{children}</h1>,
          h2: ({ children }) => <h2 className="text-3xl font-semibold my-5">{children}</h2>,
          h3: ({ children }) => <h3 className="text-2xl font-semibold my-4">{children}</h3>,
          // 继续定义h4-h6的样式
        }}
      >
        {content}
      </ReactMarkdown>
    );
  };
  
  export default MarkdownRenderer;
  

2. 解决rehypeRaw的类型错误与内容不渲染问题 #

• 内容不渲染原因：ReactMarkdown 的子节点必须是字符串，不能直接传JSX元素。把HTML内容转成字符串传入即可：

  'use client';
  import ReactMarkdown from 'react-markdown';
  import rehypeRaw from 'rehype-raw';
  
  // 内容是字符串格式，混合Markdown和HTML
  const postContent = `# 测试标题
  <div class="bg-blue-500 text-white p-4 rounded">这是带Tailwind的HTML内容</div>
  **这是加粗的Markdown文本**`;
  
  const MarkdownRenderer = () => {
    return (
      <ReactMarkdown rehypePlugins={[rehypeRaw]}>
        {postContent}
      </ReactMarkdown>
    );
  };
  

• 类型不兼容问题：安装对应类型声明包就能解决，不用临时用 // @ts-expect-error 规避：

  npm install @types/react-markdown @types/rehype-raw --save-dev
  

3. 在Markdown中使用HTML与TailwindCSS #

• 先确保Tailwind能解析Markdown/HTML中的类名，在 tailwind.config.js 中添加内容文件的路径：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      './app/**/*.{js,ts,jsx,tsx,mdx}',
      './content/**/*.md', // 如果你的Markdown文件存在这个目录下
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  };
  

• 注意HTML标签中用 class 而不是 className，rehypeRaw会自动转换成React支持的 className 属性。

4. dangerouslySetInnerHTML的安全风险评估 #

如果只有你自己有发布权限，所有内容都是你自己编写或审核过的，几乎没有安全风险。恶意代码注入的风险主要来自未过滤的外部用户输入，只要没有开放用户提交内容的入口，就不用担心XSS这类问题。不过相比之下，用react-markdown配合rehypeRaw的方式更符合React的渲染规范，也能更好地自定义组件，优先推荐这种方案。

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