Next.js 13中remark与rehype插件无法生效的问题求助

1. 校验next.config.mjs配置正确性 #

App目录下的MDX配置必须通过@next/mdx的withMDX包装，确保插件被正确传入：

import nextMDX from '@next/mdx'
import remarkGfm from 'remark-gfm'
import rehypePrism from 'rehype-prism-plus'

const withMDX = nextMDX({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [rehypePrism],
  },
})

const nextConfig = {
  pageExtensions: ['js', 'jsx', 'md', 'mdx'],
  experimental: {
    appDir: true,
  },
}

export default withMDX(nextConfig)

2. 确认依赖安装完整 #

确保以下依赖已安装（版本匹配你的Next.js版本）：

npm install @next/mdx remark-gfm rehype-prism-plus prismjs

3. 引入代码高亮与表格样式 #

• 代码块高亮：在根布局app/layout.js中导入Prism样式：

  import 'prismjs/themes/prism-tomorrow.css'
  

• 表格样式：remarkGfm会将MD表格转为HTML<table>，需自定义CSS修复渲染异常：

  table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
  }
  th, td {
    border: 1px solid #e5e7eb;
    padding: 0.75rem;
    text-align: left;
  }
  th {
    background-color: #f3f4f6;
    font-weight: 600;
  }
  

4. 检查MDX内容格式与组件使用 #

• 代码块必须指定语言标识，否则rehypePrism无法解析：

  ```javascript
  console.log('Hello Next.js')
  

• App目录下直接导入MDX文件时，确保文件后缀为.mdx，且页面组件正确渲染：

  // app/posts/hello-world/page.js
  import PostContent from './hello-world.mdx'
  
  export default function PostPage() {
    return <PostContent />
  }
  

5. 升级Next.js到稳定版 #

若使用的是Next.js 13早期版本，MDX在App目录的支持存在bug，升级到13.4+版本可解决大部分兼容性问题：

npm install next@latest react@latest react-dom@latest

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