2019-03-04 18:02:45 +01:00
|
|
|
# Next.js + MDX
|
|
|
|
|
2020-05-27 23:51:11 +02:00
|
|
|
Use [MDX](https://github.com/mdx-js/mdx) with [Next.js](https://github.com/vercel/next.js)
|
2019-03-04 18:02:45 +01:00
|
|
|
|
|
|
|
## Installation
|
|
|
|
|
|
|
|
```
|
2020-01-27 14:35:12 +01:00
|
|
|
npm install @next/mdx @mdx-js/loader
|
2019-03-04 18:02:45 +01:00
|
|
|
```
|
|
|
|
|
|
|
|
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()
|
|
|
|
```
|
|
|
|
|
2020-03-28 20:20:48 +01:00
|
|
|
Optionally you can provide [MDX plugins](https://mdxjs.com/advanced/plugins#plugins):
|
2019-03-04 18:02:45 +01:00
|
|
|
|
|
|
|
```js
|
|
|
|
// next.config.js
|
|
|
|
const withMDX = require('@next/mdx')({
|
|
|
|
options: {
|
2020-03-28 20:20:48 +01:00
|
|
|
remarkPlugins: [],
|
|
|
|
rehypePlugins: [],
|
2019-05-29 13:57:26 +02:00
|
|
|
},
|
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
|
|
|
|
|
2021-07-13 17:29:39 +02:00
|
|
|
Define the `pageExtensions` option to have Next.js handle `.md` and `.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({
|
2021-07-13 17:29:39 +02:00
|
|
|
pageExtensions: ['js', 'jsx', 'md', 'mdx'],
|
2019-03-04 18:02:45 +01:00
|
|
|
})
|
|
|
|
```
|
2019-06-09 21:34:42 +02:00
|
|
|
|
2021-08-05 11:02:38 +02:00
|
|
|
## TypeScript
|
2019-06-09 21:34:42 +02:00
|
|
|
|
|
|
|
Follow [this guide](https://mdxjs.com/advanced/typescript) from the MDX docs.
|