Use MDX in Next.js to Dynamically Create Pages for a Blog - Next.js 10 and Earlier

🧐 What's Inside
01:28 - Creating sample MDX blog posts
05:31 - Creating a React template for blog post pages
14:28 - Adding posts prop to page component with dynamic blog post page links
19:20 - Outro

🗒️ Read More

🔔 Subscribe for more tech and developer videos

🐦 Get updates straight to your Twitter @colbyfayock

📸 Catch the next stream live on Twitch @colbyfayock

✉️ Or a newsletter right to your inbox!

💝 Sponsor me for more free content like this!

🎥 Want to know what A/V equipment I use?

🧰 More Resources

Gray Matter

🎼 Music
Music from Uppbeat (free for Creators!):
License code: 0AKWJRADVGBJD711

#colbyfayock #nextjs #mdx #blogging #webdevelopment

[junfengou]

That's pretty cool, I'm gonna add this feature to my portfolio!

[michaelpacheco]

Thanks a bunch for making this video. This is exactly what I'm looking for 🙏

[evaninadgn]

Such an awesome video thank you!!! Saved me so much struggle

[timomcgeer]

Hi Colby, this is amazing. The first time I watched this video I didn’t really understand the advantages of mdx. After doing some research, I’m completely sold on the idea! For a Next site would you leave your mdx posts in the root folder? Or maybe look at firebase for hosting the posts?

[tofa]

You are good at your work, especially research. I have a challenge, can you create a node application with a preloading animation from the libraries available???

[ericktorres]

why are you such a god. God damn you are amazing at what you do.

[DevThought]

An other awesome video!
Make next part with, show the publish date of the post. Or advance course, how many people have read the post in realtime views, with firebase or new with new kid Supabase.

[alonfai]

Greate review and explanation for MDX with Next.js.
Can you share that code sample you did in a git repo?

[cryptodev]

As of December 2021, thie next-mdx-enchacned package seems to be dead

[indianappguy]

i am not able to make this work all i can see is Internal Server Error

[bytesizedpieces]

Hey Colby! Awesome tutorial. Just wanted to ask a quick question here. Are we avoiding overburdening the client by having all these mdx files with content (assume a blog with thousands of posts) thanks to next.js is embracing server side rendering? Or are there detriments to the client for using this approach with a large blog?

[wknd]

hello Colby,
Your tutorials were been amazing and go to learn . I have 1 question that in wordpress we can do pagination in the posts as well. Is it possible to do so using mdx . My content is based on pagination inside the post. Can you please let me know any way to do so . Thanks alot !

[JJ-otps]

hey colby nice explainition, as I am looking at some ecommerce site dynamic routes such as Lulumelon's, is it the same as using MDX? I am a bit confused..thanks.

[RVKAWAAA]

Hello teacher..can you build a project with Next js & Mongo/Express for build a blog?? Please i need this...thanks

[tlbjgcc]

Hi! Thanks a lot for the video!

Please, can I have an answer? How do you get a last modified date from your MDX posts? On the site at the end of the page I see last updated date for the page (can't send a link, because the comment will been removed).

How do you track and display that date? Is there any guide or instructions? Can't find anything in Google(

[cryptodev]

trying to install mdx-enchanced get's me the quickest error ever. It's telling I'm somehow not in root. I try a different package, everything is honky dory. Idk is that package deprecated?

[designcoded]

sir please do say how to save mdx in backend databases like sql, mongo db and firestore

[chrisauret]

The tempo of this background music really disrupts the ability to concentrate of what you are saying. Update - I realised that the music in conjunction with your editing style of having unnauturally short pauses between sentences is what makes this hard to follow