2019-03-04 18:02:45 +01:00
|
|
|
# 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: {
|
2019-05-29 13:57:26 +02:00
|
|
|
mdPlugins: [],
|
|
|
|
hastPlugins: [],
|
|
|
|
},
|
2019-03-04 18:02:45 +01:00
|
|
|
})
|
|
|
|
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
|
2019-05-29 13:57:26 +02:00
|
|
|
},
|
2019-03-04 18:02:45 +01:00
|
|
|
})
|
|
|
|
```
|
|
|
|
|
|
|
|
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')({
|
2019-05-29 13:57:26 +02:00
|
|
|
extension: /\.(md|mdx)$/,
|
2019-03-04 18:02:45 +01:00
|
|
|
})
|
|
|
|
module.exports = withMDX()
|
|
|
|
```
|
|
|
|
|
|
|
|
## Top level .mdx pages
|
|
|
|
|
2019-09-14 21:21:41 +02:00
|
|
|
Define the `pageExtensions` option to have Next.js handle `.mdx` files in the `pages` directory as pages:
|
2019-03-04 18:02:45 +01:00
|
|
|
|
|
|
|
```js
|
|
|
|
// next.config.js
|
|
|
|
const withMDX = require('@next/mdx')({
|
2019-05-29 13:57:26 +02:00
|
|
|
extension: /\.mdx?$/,
|
2019-03-04 18:02:45 +01:00
|
|
|
})
|
|
|
|
module.exports = withMDX({
|
2019-05-29 13:57:26 +02:00
|
|
|
pageExtensions: ['js', 'jsx', 'mdx'],
|
2019-03-04 18:02:45 +01:00
|
|
|
})
|
|
|
|
```
|
2019-06-09 21:34:42 +02:00
|
|
|
|
|
|
|
## Typescript
|
|
|
|
|
|
|
|
Follow [this guide](https://mdxjs.com/advanced/typescript) from the MDX docs.
|