8d63330c15
* Change mdx options description https://mdxjs.com/advanced/plugins#using-remark-and-rehype-plugins * Change descriptions of next-mdx
1.4 KiB
1.4 KiB
Next.js + MDX
Installation
npm install @next/mdx @mdx-js/loader
or
yarn add @next/mdx @mdx-js/loader
Usage
Create a next.config.js
in your project
// next.config.js
const withMDX = require('@next/mdx')()
module.exports = withMDX()
Optionally you can provide MDX plugins:
// next.config.js
const withMDX = require('@next/mdx')({
options: {
remarkPlugins: [],
rehypePlugins: [],
},
})
module.exports = withMDX()
Optionally you can add your custom Next.js configuration as parameter
// next.config.js
const withMDX = require('@next/mdx')()
module.exports = withMDX({
webpack(config, options) {
return config
},
})
Optionally you can match other file extensions for MDX compilation, by default only .mdx
is supported
// next.config.js
const withMDX = require('@next/mdx')({
extension: /\.(md|mdx)$/,
})
module.exports = withMDX()
Top level .mdx pages
Define the pageExtensions
option to have Next.js handle .mdx
files in the pages
directory as pages:
// next.config.js
const withMDX = require('@next/mdx')({
extension: /\.mdx?$/,
})
module.exports = withMDX({
pageExtensions: ['js', 'jsx', 'mdx'],
})
Typescript
Follow this guide from the MDX docs.