Skip to content

Commit

Permalink
Note missing plugins support in mdxRs, refine (#72241)
Browse files Browse the repository at this point in the history
<!-- Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:

## For Contributors

### Improving Documentation

- Run `pnpm prettier-fix` to fix formatting issues before opening the
PR.
- Read the Docs Contribution Guide to ensure your contribution follows
the docs guidelines:
https://nextjs.org/docs/community/contribution-guide

### Adding or Updating Examples

- The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- Make sure the linting passes by running `pnpm build && pnpm lint`. See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md

### Fixing a bug

- Related issues linked using `fixes #number`
- Tests added. See:
https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md

### Adding a feature

- Implements an existing feature request or RFC. Make sure the feature
request has been accepted for implementation before opening a PR. (A
discussion must be opened, see
https://github.com/vercel/next.js/discussions/new?category=ideas)
- Related issues/discussions are linked using `fixes #number`
- e2e tests added
(https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs)
- Documentation added
- Telemetry added. In case of a feature if it's used or not.
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md


## For Maintainers

- Minimal description (aim for explaining to someone not on the team to
understand the PR)
- When linking to a Slack thread, you might want to share details of the
conclusion
- Link both the Linear (Fixes NEXT-xxx) and the GitHub issues
- Add review comments if necessary to explain to the reviewer the logic
behind a change

### What?

### Why?

### How?

Closes NEXT-
Fixes #

-->

### What?

1. Document incompatibility of Turbopack with MDX remark and rehype
plugins
2. Improve casing and prose
3. Add link to `remark-gfm`

### Why?

It's confusing to users that plugins don't work with Turbopack (because
`mdxRs` is required, which [does not support
plugins](https://github.com/wooorm/mdxjs-rs#:~:text=This%20project%20does%20not%20yet%20support%20plugins.)):

- https://bsky.app/profile/matthamlin.bsky.social/post/3la2lzzuprj22

### How?

Edit docs page

Co-authored-by: JJ Kasper <jj@jjsweb.site>
  • Loading branch information
karlhorky and ijjk authored Nov 5, 2024
1 parent b3ef7a3 commit fdcc3c9
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 fdcc3c9

Please sign in to comment.