next-mdx-remote VS next-mdx-enhanced

Another follow-up. Some libraries[1] started to break from 15.1.8 onwards, so you had to downgrade to the vulnerable versions the author mentioned as well.

[1]: https://github.com/hashicorp/next-mdx-remote/issues/488

next-mdx-remote

We are going to be using next-mdx-remote for this tutorial. Let us install it -

So, i was reading the docs and Next/MDX looks exactly what i need for my blog. Well, not exactly because having hundreds of Markdown Pages doesn't look the best way to store the pages, and i was wondering if are any way to generate those pages from a DataBase full of Markdown pages. I read about next-MDX-remote but i was wondering if is there a native way to do that.

next-mdx-remote, a community package maintained by Hashicorp that allows you to use MDX from outside your project.

Do note that Code Hike also works with Next MDX Remote and MDX Bundler however, we are going to look at a simple example with the official MDX plugin for Next.js.

Refer the next-mdx-remote github to learn more the use of plugins and how awesome things could be done using MDX.

You could try storing mdx in wordpress somehow (I'm not a wordpress expert) and using next-mdx-remote to render that at runtime. MDX can contain both markdown and react components.

MDX is an extension on Markdown which, lets you import custom React components into your blog posts. To use MDX with Next.js you need to use a separate package. There are a few choices with MDX-remote being a popular one, but it has some drawbacks. For that reason, I chose to use mdx-bundler.

Like @next/mdx, you add next-mdx-enhanced to the project by exporting a function in the project's next.config.js file.

I don't have any experiences with the other libraries (e.g. next-mdx-enhanced, next-mdx-remote) so I won't judge the pros and cons of one compared to the others.

React & next.js are worth evaluating. It's a super powerful full stack with everything from server side rendered data (REST APIs even) all the way to complete SPAs, all using the same react components. It's a slick little swiss-army knife that can make anything from a basic blog with markdown content, to a static marketing page, to a full client-first PWA experience.

MDX is another neat step, it's markdown + react components and fits in very well with next.js: https://github.com/hashicorp/next-mdx-enhanced

Vue, and Svelte to just get an idea of what other components systems are like. They're all equally capable and just have different tradeoffs and styles. Keep an eye on Svelte in particular as its next.js-like system (SvelteKit) is working on a major revamp to be serverless-first and is quite interesting. Once you learn one component system it's easy to switch between them all--they're all cribbing and building on top of each other's ideas. The whole space is innovating in a great way.

Web components are tood to learn and compare to component frameworks above. It's still a changing space but points to a nice future where we can all just publish and share components.