104b8d4732
**What's the problem this PR addresses?** `@next/mdx` adds the webpack loader `@mdx-js/loader` without resolving it to an absolute path Depends on https://github.com/vercel/next.js/pull/17606 **How did you fix it?** `require.resolve` the webpack loader before adding it |
||
---|---|---|
.. | ||
index.js | ||
license.md | ||
package.json | ||
readme.md |
Next.js + MDX
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
// 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 .mdx
files in the pages
directory as pages:
// next.config.js
const withMDX = require('@next/mdx')({
extension: /\.mdx?$/,
})
module.exports = withMDX({
pageExtensions: ['js', 'jsx', 'mdx'],
})
Typescript
Follow this guide from the MDX docs.