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!! 🙌😁

[@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 .

[@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

[@immipixediter210]

Source Code or Example *.mdx files needed

[@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.

[@saadh393]

Best

[@colbyfayock]

🙌