Next.js

Next.js 提供了一个 官方插件 来简化将 MDX 导入 项目的过程。

npm install --save @next/mdx @mdx-js/loader

要配置 MDX，请将以下内容添加到 next.config.js 配置文件中：

const withMDX = require('@next/mdx')()
module.exports = withMDX()

将 .mdx 文件当作页面（pages）对待

为了让 Next.js 将 pages 目录下的 .mdx 文件当作页面（pages）对待，请使用 pageExtensions 属性：

// next.config.js
const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
})
module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'mdx'],
})

用 MDX 处理 .md 文件

Next.js 的 MDX 插件还可以设置为用 MDX 解析 .md 文件：

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

使用 MDX 插件

在 next.config.js 中你还可以使用来自 remark 和 rehype 的 MDX 插件

const withMDX = require('@next/mdx')({
  options: {
    remarkPlugins: [],
    rehypePlugins: []
  }
})
module.exports = withMDX()

对 Typescript 的支持

const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/
})
module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx']
})