We currently have some issues with next-mdx-remote, namely component just don't work and the size of the first chunk will grow with every component added to the provider (which we have a lot since this is the way we currently load demos ...).
Benefits
We hope that switching to @next/mdx solves these problems and also has some added benefits:
since there is no "catch all route" ([[...slug]]) pages should be lower in size
components should work again since they are not "wrapped" in "sub app"
better SSR since pages are directly loaded with webpack
we can use import to import demos and don't have to add them to the MDX components!
Obstacles
There are some obstacles switching to @next/mdx:
no support for front matter except using export but we want YAML!
This is not really an obstacle but worth mentioning: currently we have all remark and rehype plugins implemented in TypeScript, but the next config can also be in JavaScript, so we have to convert them.
Implementation
Luckily other people already had the same issues and solved them for us! By using the following plugins we should be able to get the front matter and use it in our next app. This will also allow us to add a global layout inside _app.tsx.
@next/mdx
remark-frontmatter
remark-mdx-frontmatter
recma-nextjs-static-props
There is also an example app we can use as template:
sebald
commented
2 years ago
Description
We currently have some issues with
next-mdx-remote, namely component just don't work and the size of the first chunk will grow with every component added to the provider (which we have a lot since this is the way we currently load demos ...).Benefits
We hope that switching to
@next/mdxsolves these problems and also has some added benefits:[[...slug]]) pages should be lower in sizeimportto import demos and don't have to add them to the MDX components!Obstacles
There are some obstacles switching to
@next/mdx:exportbut we want YAML!This is not really an obstacle but worth mentioning: currently we have all
remarkandrehypeplugins implemented in TypeScript, but the next config can also be in JavaScript, so we have to convert them.Implementation
Luckily other people already had the same issues and solved them for us! By using the following plugins we should be able to get the front matter and use it in our next app. This will also allow us to add a global layout inside
_app.tsx.There is also an example app we can use as template:
https://github.com/remcohaszing/recma-nextjs-static-props/blob/4971bb489b70031aaf3ce9f13852de15e64ceed2/next.config.js