MDX官网：https://mdxjs.com/

ps：MDX 可让您在 Markdown 内容中使用 JSX。您可以导入组件（例如交互式图表或警报），并将其嵌入到内容中。

详细步骤

1. 安装依赖pnpm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx

2. 编写配置文件 next.config.js

   JS

   const withMDX = require('@next/mdx')({
     options: {
       remarkPlugins: [],
       rehypePlugins: [],
       // 如果需要使用 MDX 中的 frontmatter，设置为 true
       providerImportSource: "@mdx-js/react"
     }
   })
   
   /** @type {import('next').NextConfig} */
   const nextConfig = {
     reactStrictMode: false,
     pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
   
     // MDX 配置应该在这里
     experimental: {
       mdxRs: true,
     },
   }
   
   module.exports = withMDX(nextConfig)

3. 在 app 同级下创建文件mdx-components.tsx，编写默认配置

   TSX

   import type { MDXComponents } from "mdx/types";
   
   // 这个文件允许你提供自定义 React 组件
   // 以在 MDX 文件中使用。你可以导入和使用任何
   // 你想要的 React 组件，包括内联样式、
   // 其他库的组件等等。
   
   export function useMDXComponents(components: MDXComponents): MDXComponents {
     return {
       ...components,
     };
   }

4. 在 app 下面新建一个文件夹 mdx-page （其他命名也可），里面新建一个文件 Welcome.mdx，编写内容：

   MARKDOWN

   import { Button } from "@nextui-org/button";
   export const metadata = {
     title: 'MDX Page',
     description: 'Welcome to my MDX page',
   }
   
   # Welcome to my MDX page!
   
   我 **喜欢** 使用 [Next.js](https://nextjs.org/)
   
   This is some **bold** and _italics_ text.
   
   This is a list in markdown:
   
   - One
   - Two
   - Three
   
   Checkout my React component:
   
   <Button >MDX</Button>

5. 新建一个在 mdx-page 下面新建一个 page.tsx

   TSX

   "use client";
   
   import Welcome from "./Welcome.mdx";
   export default function mdxPage() {
     return <Welcome />;
   }

6. 访问 localhost:3000/mdx-page 即可看到 md 渲染

可能遇到的问题

1. md 部分语法无法渲染，例如一二三级标题，list 列表等

解决办法：（使用 tailwindcss 自带的排版）

• 安装 pnpm install @tailwindcss/typography

• 在 tailwind.config.js 中添加以下代码

  JS

  module.exports = {
      plugins: [
          require("@tailwindcss/typography"),
      ]
  }

• 修改 /mdx-page/page.tsx 代码如下：

  TSX

  "use client";
  
  import Welcome from "./Welcome.mdx";
  export default function mdxPage() {
    return (
      <article className="prose">
        <Welcome />
      </article>
    );
  }

• 即可生效

另外，如需调整 md 渲染样式，在 global.css 中添加/修改下面的代码即可

@layer components {
      .prose {
            /* 添加您的自定义样式 */
            color: #f8ecec; /* 示例：更改文本颜色 */
            font-size: 1.125rem; /* 示例：更改字体大小 */
      }

      .prose h1 {
            color: #f8ecec; /* 示例：更改文本颜色 */
            @apply text-3xl font-bold; /* 使用 Tailwind 的 @apply */
      }

      .prose p {
            @apply mb-4; /* 添加下边距 */
      }

      .prose strong {
            color: #f8ecec; /* 示例：更改加粗颜色 */
            @apply font-bold; /* 使用 Tailwind 的 @apply */
      }

      .prose a {
            color: #f8ecec; /* 示例：更改超链接颜色 */
            /*@apply font-bold; !* 使用 Tailwind 的 @apply *!*/
      }
}