e1083f0e3a
* Minor edits for CSS doc * Remove unnecessary --save from npm install * Different font family Co-authored-by: Joe Haddad <timer150@gmail.com>
78 lines
1.4 KiB
Markdown
78 lines
1.4 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 @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 `pageExtensions` 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'],
|
|
})
|
|
```
|
|
|
|
## Typescript
|
|
|
|
Follow [this guide](https://mdxjs.com/advanced/typescript) from the MDX docs.
|