38169e3385
## Documentation / Examples - [x] Make sure the linting passes by running `pnpm lint` - [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples) The MDX guide is missing `@mdx-js/react` as a required dependency in the setup section. Co-authored-by: JJ Kasper <jj@jjsweb.site>
1.5 KiB
1.5 KiB
Next.js + MDX
Installation
npm install @next/mdx @mdx-js/loader @mdx-js/react
or
yarn add @next/mdx @mdx-js/loader @mdx-js/react
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 .md
and .mdx
files in the pages
directory as pages:
// next.config.js
const withMDX = require('@next/mdx')({
extension: /\.mdx?$/,
})
module.exports = withMDX({
pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
})
TypeScript
Follow this guide from the MDX docs.