Next.js项目中MDX文件自定义组件缩进与<p>标签异常问题

项目依赖版本 #

"@mdx-js/loader": "^2.1.5",
"@mdx-js/react": "^2.1.5",
"@next/mdx": "^12.1.6",
"next": "^12.1.6"

问题 #

在MDX文件中使用<CustomReactComponent/>组件并搭配文本（示例：<CustomReactComponent/>, you can....），输出时文本未被包裹在<p>标签中，且不遵循正确的缩进规则。

解决方法 #

• 调整MDX写法
  MDX解析时，组件与文本直接连写可能被识别为内联元素，导致文本脱离段落上下文。尝试给组件添加空格，或用括号明确包裹组件，确保和文本属于同一段落块：

  <CustomReactComponent /> You can....
  

  或者：

  (<CustomReactComponent />) You can....
  

• 自定义MDX段落组件
  通过MDXProvider覆盖默认的段落渲染逻辑，强制文本内容被<p>标签包裹并设置缩进：

  import { MDXProvider } from '@mdx-js/react';
  
  const customComponents = {
    p: (props) => <p {...props} style={{ margin: '1rem 0', paddingLeft: '1rem' }} />
  };
  
  // 在_app.js中全局配置
  export default function App({ Component, pageProps }) {
    return (
      <MDXProvider components={customComponents}>
        <Component {...pageProps} />
      </MDXProvider>
    );
  }
  

• 升级依赖版本
  当前使用的Next.js和MDX版本存在解析bug的可能性，升级到兼容的新版本可修复这类问题：

  npm install next@latest @next/mdx@latest @mdx-js/react@latest @mdx-js/loader@latest
  

  注意：升级后需检查项目兼容性，比如Next.js 13+的App Router需调整对应配置。

• 验证MDX配置
  确保next.config.js中的MDX配置正确启用：

  const withMDX = require('@next/mdx')({
    extension: /\.mdx?$/,
    options: {
      remarkPlugins: [],
      rehypePlugins: [],
      providerImportSource: '@mdx-js/react',
    },
  });
  
  module.exports = withMDX({
    pageExtensions: ['js', 'jsx', 'md', 'mdx'],
  });
  

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