e1083f0e3a
* Minor edits for CSS doc * Remove unnecessary --save from npm install * Different font family Co-authored-by: Joe Haddad <timer150@gmail.com>
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 options:
// next.config.js
const withMDX = require('@next/mdx')({
options: {
mdPlugins: [],
hastPlugins: [],
},
})
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.