前言

想必大家在工作或者学习的过程中肯定都使用过 Markdown 来记录学习笔记和写一些博客，好比如在掘金写文章发表的时候，使用的就是 Markdown。

在 Next.js 官方文档中表示， Markdown 是一种用于格式化文本的轻量级标记语言，它允许我们使用纯文本语法进行编写并将其转换为结构有效的 HTML。

而 MDX 是 Markdown 的超集，意味着允许我们可以直接在 Markdown 文件中写入 JSX，可以在 Markdown 中添加动态交互性的内容和嵌入 React 组件。

使用方法

在 Next.js 中是可以支持应用内的本地 MDX 内容，以及在服务器上动态获取的远程 MDX 文件。

处理机制是 Next.js 插件负责将 Markdown 和 React 组件转换为 HTML，包括支持在服务端组件中使用。

安装依赖

Next.js 提供 @next/mdx 这个包和一些相关的包来提供对 Markdown 和 MDX 文件的支持，它允许我们从本地文件获取数据，然后就可以直接在 /app 目录中创建带有 .md 和 .mdx 扩展名的页面。

因此，我们在项目命令行终端输入 npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx 。

安装完成之后，在进行一些配置工作，就可以使用 Next.js 来渲染 MDX 文件。

进行配置

接下来，要在项目根目录中的 next.config.mjs 文件中进行一些配置，才能使用 MDX，这样就允许带有.md 和 .mdx 的文件充当应用中的页面、路由或导入。

import createMDX from '@next/mdx'

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 配置 `pageExtension` 以包含 MDX 文件
  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
}

const withMDX = createMDX({
  // 可以在此处添加一些 MarkDown 插件
})

export default withMDX(nextConfig)

然后在项目中创建 mdx-components.tsx 文件用于定义全局 MDX 组件，注意文件要与 /app 处于同一级别。

import type { MDXComponents } from 'mdx/types'
 
export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
  }
}

开始渲染

在 /app 目录下新建 test-markdown/page.mdx 文件，用于测试使用 MDX 语法能否正确渲染。

# Welcome to my MDX page!

This is some **bold** and _italics_ text.

This is a list in markdown:

- One
- Two
- Three

在浏览器中输入 http://localhost:3000/test-markdown 就能看到渲染后的效果。

在项目中创建 src/components/test-mdx.tsx 文件，用于测试在 MDX 中引用组件。

export default function Page() {
  return (
    <>
      <div>我是测试组件，我可以被引用到 MDX 文件中</div>
    </>
  )
}

然后在 src/app/test-markdown/page.mdx 文件中引入 src/components/test-mdx.tsx 组件。

import TextMdx from '@/components/test-mdx.tsx'

# Welcome to my MDX page!

This is some **bold** and _italics_ text.

This is a list in markdown:

- One
- Two
- Three

<TextMdx />

继续在浏览器中输入 http://localhost:3000/test-markdown 就能看到引入组件后渲染的效果。

使用插件

使用 remark-gfm 插件来支持 GFM，即 GitHub Flavored Markdown，是目前最流行的 Markdown 扩展语法，它提供了诸如表格、删除线、围栏代码、Emoji 等在内的标记语法。

首先在终端命令行输入 npm i remark-gfm 安装插件，然后在 next.config.mjs 配置文件中新增该插件。

import createMDX from '@next/mdx'
import remarkGfm from 'remark-gfm'

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 配置 `pageExtension` 以包含 MDX 文件
  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
}

const withMDX = createMDX({
  // 可以在此处添加一些 MarkDown 插件
  options: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [],
  },
})

export default withMDX(nextConfig)

继续在浏览器中输入 http://localhost:3000/test-markdown 就能看到使用删除线后渲染的效果。

总结

在 Next.js 中书写 MDX 对于 Markdown 爱好者来说确实是一个福音，在平时使用 MDX 记录一些笔记和写博客也是一种快捷的方式，说到这里大家可能会马上联想到 VitePress。

VitePress 默认带有内置的 Markdown 扩展，开箱即用，直接就可以在 .mdx 文件中书写 MDX 语法，如果你还不熟悉 VitePress，可以参考这篇文章《VitePress 1.0 正式版横空出世！来一份使用指南》熟悉熟悉。

在 Next.js 中集成 MDX

前言

使用方法

安装依赖

进行配置

开始渲染

使用插件

总结