Skip to content

Commit

Permalink
Note missing plugins support in mdxRs, refine
Browse files Browse the repository at this point in the history
  • Loading branch information
karlhorky authored Nov 3, 2024
1 parent 94eca4b commit ba51787
Showing 1 changed file with 10 additions and 6 deletions.
16 changes: 10 additions & 6 deletions docs/02-app/01-building-your-application/07-configuring/05-mdx.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -616,21 +616,21 @@ A common use case for this is when you want to iterate over a collection of MDX
> - Using `fs`, `globby`, etc. can only be used server-side.
> - View the [Portfolio Starter Kit](https://vercel.com/templates/next.js/portfolio-starter-kit) template for a complete working example.
## Remark and Rehype Plugins
## remark and rehype Plugins

You can optionally provide `remark` and `rehype` plugins to transform the MDX content.
You can optionally provide remark and rehype plugins to transform the MDX content.

For example, you can use `remark-gfm` to support GitHub Flavored Markdown.
For example, you can use [`remark-gfm`](https://github.com/remarkjs/remark-gfm) to support GitHub Flavored Markdown.

Since the `remark` and `rehype` ecosystem is ESM only, you'll need to use `next.config.mjs` as the configuration file.
Since the remark and rehype ecosystem is ESM only, you'll need to use `next.config.mjs` or `next.config.ts` as the configuration file.

```js filename="next.config.mjs"
import remarkGfm from 'remark-gfm'
import createMDX from '@next/mdx'

/** @type {import('next').NextConfig} */
const nextConfig = {
// Configure `pageExtensions`` to include MDX files
// Allow .mdx extensions for files
pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
// Optionally, add any other Next.js config below
}
Expand All @@ -643,10 +643,14 @@ const withMDX = createMDX({
},
})

// Wrap MDX and Next.js config with each other
// Combine MDX and Next.js config
export default withMDX(nextConfig)
```

> **Good to know**:
>
> remark and rehype plugins cannot be used with [Turbopack](/docs/architecture/turbopack), due to lack of plugins support in [`mdxRs`](#using-the-rust-based-mdx-compiler-experimental)
## Remote MDX

If your MDX files or content lives _somewhere else_, you can fetch it dynamically on the server. This is useful for content stored in a separate local folder, CMS, database, or anywhere else. A popular community package for this use is [`next-mdx-remote`](https://github.com/hashicorp/next-mdx-remote#react-server-components-rsc--nextjs-app-directory-support).
Expand Down

0 comments on commit ba51787

Please sign in to comment.