Skip to content
MDX logo
v1.6.21

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']
})

Providing MDX Plugins

In next.config.js you can also provide MDX plugins from remark and rehype

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

Typescript support

const withMDX = require('@next/mdx')({
extension: /\.mdx?$/
})
module.exports = withMDX({
pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx']
})
Edit this page on GitHub
Previous:
入门
Next:
Gatsby 集成 MDX