491f9a2c49
At request of @timneutkens I moved the `next-mdx` plugin from the next-plugins repo into Next.js. Also fixed small typo in README under setup.
78 lines
1.3 KiB
Markdown
78 lines
1.3 KiB
Markdown
# Next.js + MDX
|
|
|
|
Use [MDX](https://github.com/mdx-js/mdx) with [Next.js](https://github.com/zeit/next.js)
|
|
|
|
## Installation
|
|
|
|
```
|
|
npm install --save @next/mdx @mdx-js/loader
|
|
```
|
|
|
|
or
|
|
|
|
```
|
|
yarn add @next/mdx @mdx-js/loader
|
|
```
|
|
|
|
## Usage
|
|
|
|
Create a `next.config.js` in your project
|
|
|
|
```js
|
|
// next.config.js
|
|
const withMDX = require('@next/mdx')()
|
|
module.exports = withMDX()
|
|
```
|
|
|
|
Optionally you can provide [MDX options](https://github.com/mdx-js/mdx#options):
|
|
|
|
```js
|
|
// 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
|
|
|
|
```js
|
|
// 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
|
|
|
|
```js
|
|
// next.config.js
|
|
const withMDX = require('@next/mdx')({
|
|
extension: /\.(md|mdx)$/
|
|
})
|
|
module.exports = withMDX()
|
|
```
|
|
|
|
## Top level .mdx pages
|
|
|
|
Define the `pagesExtensions` option to have Next.js handle `.mdx` files in the `pages` directory as pages:
|
|
|
|
```js
|
|
// next.config.js
|
|
const withMDX = require('@next/mdx')({
|
|
extension: /\.mdx?$/
|
|
})
|
|
module.exports = withMDX({
|
|
pageExtensions: ['js', 'jsx', 'mdx']
|
|
})
|
|
```
|