Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

examples(with-mdx): update to MDX 3 #62503

Merged
merged 2 commits into from
Jun 27, 2024
Merged

examples(with-mdx): update to MDX 3 #62503

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e4079f9
examples(with-mdx): update to MDX 3
remcohaszing Feb 25, 2024
cd9ebe7
Merge branch 'canary' into update-with-mdx-example
samcx Jun 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions examples/with-mdx/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@
"start": "next start"
},
"dependencies": {
"@mdx-js/loader": "^1.5.1",
"@mdx-js/react": "^1.6.18",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a separate example for app router, should this dep remain?

https://github.com/vercel/next.js/tree/canary/examples/app-dir-mdx

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

True, it's being covered there.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The benefit that @mdx-js/react offers, is that it allows users to provide components for MDX files for different files in the React tree. IMO this is a niche use case. I think the mdx-components file is a much better solution for Next.js. Kudos to whoever came up with that.

@mdx-js/react works for the pages directory, but not for the app directory. It just crashes with a weird error. I personally found this confusing and I’ve heard so from others too.

Regardless of what works or doesn’t work, IMO it’s good to have a single blessed way to use MDX with Next.js. I think it’s hard to explain what the type of router has to do with this.

Using the mdx-components file better aligns with the DX after I implement support for provided components in the MDX language server. Just define them once globally, then use them in every MDX file.

What is missing from this PR though, is the addition of the mdx-components file. I could add it, but even better would be to merge #59693.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI: The mdx-components file is only for the App Router, not for the Pages Router.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI: The mdx-components file is only for the App Router, not for the Pages Router.

This confused me, because I see no special handling depending on the router type in https://github.com/vercel/next.js/blob/canary/packages/next-mdx/index.js. So I just tried it and this is simply not true. The mdx-components file works perfectly fine with either type of router.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting... good point! TIL

"@mdx-js/loader": "^3.0.1",
"@next/mdx": "^9.1.1",
"next": "latest",
"react": "^18.2.0",
Expand Down
Loading