Using MDX (markdown) in NextJs 13 `app` folder

👉🏼 The Ultimate NextJs Course

👉🏼 Source code on GitHub

👉🏼 Blog post about mdx

👉🏼 NextJs documentation on MDX

👉🏼 MDX official site

CHAPTERS

0:00 Intro
0:30 What is MDX?
1:45 MDX in NextJs docs
3:15 Using @next/mdx package
10:45 Styling markdown using Tailwind
13:30 Using next-mdx-remote package
21:46 Adding metadata
23:26 Outro

[nammdev]

I just wanted to take a moment to express how much I've been enjoying your content on NextJs. Your channel is truly one of the best when it comes to all things related to NextJs, and I have learned so much from your videos. Your dedication and passion for this framework is truly inspiring, and I have no doubt that you will continue to rise in popularity and become a legend in the NextJs community. Keep doing what you're doing, and thank you for all that you do!

[rheavictor]

Man. I was having a such hard time migrating from MD to MDX on Next, and you saved me. Thank you so much.

[ThreeSides]

After trying 10 different solution that failed this is what actually worked, thanks

[zaneferns]

This was a brilliant video and it helped me after hours of browsing through documentation trying to extract metadata from mdx, Thank you

[udaym]

Thank you for your time. I appreciate it.

[hbela]

Thx, your tutos are simply top-notch.

[roniaxelrad]

Thank you Hamed! Mdx and headless cms are topics I really interested in, since you can create rich text pages and render it so easily straight to your web app

[morejoylodra]

Another question regarding the video. For my personal website, is it better to use next-mdx-remote with the contents (mdx files) inside the app directly or have another CMS and store the mdx files inside that CMS?

Does having the contents inside the app affect the performance of the website?

[rezaz]

That was a great video. I was frustrated about styling markdowns using tailwind. this video helped me a lot. Thanks.
How can we add support to tables in markdown?

[cashewolddew]

Hello! Thanks for the tutorial!
I have a problem, though. I tried your solution for next-mdx-remote in order to gather my mdx files from another directory. However, even though that works, the plugins I include in my next.config.mjs don't seem to get attached to the generated content. In order to test this, I tried remarkGfm which adds the github markdown support. However, that doesn't seem to apply for any files under posts/[slug]. I tried the same with remarkFrontmatter and it doesn't 'cut away' my frontmatter. I can only get rid manually of it. Got any clue why this could be happening?

One other thing I'd like to specify is that, if I import manually an MDX file (for example: import Ghtest from "../content/gh-test.mdx"), it gets rendered correctly, taking remarkGfm into account

[bannontanner]

your lib file saved me so much headache thank you so much for this video

[usmansoomro]

Hello Sir, hope u are fine. This video is very useful but I have a question that how I search my blogs from a markdown files content statically.
I'm currently working on a project that generate static blog site and when user search the blog it search from blog and gives result

[Milan]

is there a way to make the link syntax return a specific component instead of a tag?

[glautermoulin]

Hi Hamed, excellent tutorial. Thanks. Can you guide me on how to import a component into an mdx file? I do this without any problems when I create the mdx and access it directly through the route but I receive an error if I access it as a blog element.

[GabrielMartinez-ezue]

I see other videos include something called gray matter over @next/mdx. What are your thoughts?

[Shawn-Mosher]

This is awesome! I would love to see how to create infinite scroll in the app directory

[udaym]

Thank you so much for provding best knoweldge if it is possible can you make video for backend and also backend road map

[xtz_]

Hi, just a question I'm using nextauth and everytime the pages get regenerated I lose the session any solution? I posted the question in the discord server

[morejoylodra]

Hi, Hamed. Thanks for the video. What’s your opinion on PostgreSQL vs MongoDB?

I heard postgres can store JSON files now.

[checkhere-tn]

Hello sir... How can we use custom components in mdx files without overwriting..???