MDX in Next.js is Easy Now

[@colbyfayock]

Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course

[@isaito77]

Dude you're a wizard. I spent nearly 12 hours today trying to get this exact functionality with mdx files typed up and with this video I can now go to sleep. Cheers !!!!

[@colbyfayock]

glad i was able to help!! 🙌😁

[@calvincrane]

Good video, I learned a lot thank you. Seem to not be able to handle tables even with remark plugins. I did this with md already but not seen ot working with mdx.

[@ibnurasikh]

Very good video! My question is, do I need to rebuild every time new content is added or updated in MDX? I come from WordPress, where content can be published with just one click. Can this be achieved with MDX and Next.js, or do I still need to rebuild or redeploy?

[@jengkhaw15]

Since this is reading from fs, you would need to redeploy for updates. Just store your mdx (or whatever content) in a database and access it from nextjs if you want dynamic content.

[@shreyashraj]

yes it will. If you don't want that you can use a database with markdowns but then power of jsx will be missing

[@lostinthenarrativve]

As soon as I try to install the dependencies I get loads and loads of configuration errors .

[@marekjasiok6977]

It's absolutely brilliant, and I'd like to set it up, too. However, desperately trying to reproduce this in Next 15, but I get the error: [ Server ] Error: A React Element from an older version of React was rendered. This is not supported. It can happen if: - Multiple copies of the "react" package is used. - A library pre-bundled an old copy of "react" or "react/jsx-runtime". - A compiler tries to "inline" JSX instead of using the runtime. I moved your project to Next 15 and it gives me the same error. What seems to have changed in between?

[@colbyfayock]

perhaps its related to Next.js using React 19 in 15? try running npm list react and it might show the different versions and which dependency its related to

[@marekjasiok6977]

@@colbyfayock thank you - it was React 18 - I now just created a brand new (@latest) next app with the tool (with React 19) and I can't npm i next-mdx-remote, I get a dependency error. Installing with the --legacy-peer-deps - will keep you posted if successful :-)

[@RabahTaib-mn4fs]

How do you get code highlighting for mdx files?

[@colbyfayock]

for that you typically can use processing tools such as remark which is a popular one, for instance: github.com/rehypejs/rehype-highlight i have a tutorial that walks through something similar but in HTML and a different use case: kzbin.info/www/bejne/gnexfqZunqqajq8 haven't used this but shiki is popular: shiki.style/packages/markdown-it#usage here's the official mdx page on options: mdxjs.com/guides/syntax-highlighting/ though seems like its a bit dated

[@alireza1642]

Why not using contentlayer?

[@colbyfayock]

first i heard of it! maybe that'll be an upcoming vidoe "MDX is Even Easier Now" 🙃

[@rtorcato]

content layer is no longer maintained. There is a new package called velite

[@colbyfayock]

@@rtorcato ah good to know, will check that one out then

[@marwen_dev]

Yeah contentlayer is no longer maintained but contentlayer2 is lol😅. It works great 👍 just install contentlayer2 and follow the docs of contentlayer.

[@immipixediter210]

Source Code or Example *.mdx files needed

[@saadh393]

Best

[@colbyfayock]

🙌