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

[@nammdev97]

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!

[@hamedbahram]

Thank you NamDev for taking the time to write this and for your kind words. I'm very glad you found the content useful. Thanks for tuning in.

[@rheavictor7]

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

[@hamedbahram]

My pleasure! Glad to hear it helped.

[@ThreeSides]

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

[@hamedbahram]

Glad to hear that!

[@zaneferns9576]

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

[@hamedbahram]

You're welcome! I'm glad to hear that.

[@hqasmei]

Another amazing video! Thanks Hamed!

[@hamedbahram]

Thanks, Hosna!

[@hbela1000]

Thx, your tutos are simply top-notch.

[@hamedbahram]

Appreciate that!

[@udaym4204]

Thank you for your time. I appreciate it.

[@hamedbahram]

You're welcome Uday. Thanks for tuning in.

[@roniaxelrad9493]

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

[@hamedbahram]

Anytime Roni! I agree mdx is awesome!

[@adnanrruka5152]

Best channel ever

[@hamedbahram]

Thank you! appreciate that.

[@DayaStudies]

Thank you for teaching us!

[@hamedbahram]

My pleasure!

[@bannontanner3948]

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

[@hamedbahram]

Glad to hear that Bannon.

[@brainrotjs]

exactly what I needed!

[@hamedbahram]

There you have it Noah!

[@mohammadsh7767]

عالی اقا حامد

[@hamedbahram]

Eraadat 🫡

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

[@hamedbahram]

Try passing the plugins to the serialize / compile function and not the next.config

[@cashewolddew]

Thanks for the answer. I tried this and, indeed, it seems to take the plugins. However, I'm guessing this is unrelated to my question, but a lot of latest versions for remark don't seem to be supported by next-mdx-remote. Thanks a lot, again!@@hamedbahram

[@M7ilan]

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

[@hamedbahram]

What do you mean by returning a component? Can you expand on your question.

[@M7ilan]

@@hamedbahram I mean is it possible to configure the syntax [Link](URL) so that, instead of generating an tag, it produces a React component or a Next.js tag?

[@rezaz7167]

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?

[@hamedbahram]

Glad it was helpful! You need to use rehype plugins for that.

[@Shawn-Mosher]

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

[@hamedbahram]

Thanks Shawn! That's an interesting question 🤔 you can fetch the initial data on the server and then infinite scroll (paginate) on the client, since it depends on the user interaction.

[@Shawn-Mosher]

Thanks for the reply@@hamedbahram! Yeah I’m currently hung up on it with Nextjs 13 and the app directory. It’s like the documentation says. Use the server to fetch the data and pass it down to the client but the client would need a way to send a request back up to the server component to trigger more data. I was thinking of trying to pass the getPost function to the client but unsure if that would even work like that. I know the documentation says you could use a third party as SWR or react query but I keep think there has to be a way to pass it back to the server’s components fetch function. If you’re up for a challenge, it would be very cool to see a video where you tackle that problem. I’ve seen your awesome infinite scroll video.

[@hamedbahram]

@@Shawn-Mosher you can create an API endpoint to call from the client. I agree, this makes a good topic for a video 🤔

[@0xtz_]

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

[@hamedbahram]

Not sure why this is happening 🤔 Is it a server component or a client component? Also what discord server are you referring to? I don't have a discord server 🤓

[@0xtz_]

@@hamedbahram in vercel discord server, and idk why I can't share the repo link hhh

[@hamedbahram]

@@0xtz_ I see 😅

[@pavanchalla3787]

Hi hamed, i tried this approach everything is working but when i tried to import a React component called Hello, which nothing but hello world text in mdx file i'm getting this error: Error: Expected component `Hello` to be defined: you likely forgot to import, pass, or provide it. It’s referenced in your code at `15:1-15:10`

[@hamedbahram]

Are you using the `next-mdx` package or the `next-mdx-remote`?

[@pavanchalla3787]

@@hamedbahram i'm using @next/mdx

[@pavanchalla3787]

@@hamedbahram i'm using next-mdx

[@pavanchalla3787]

@@hamedbahram this issue is fixed once when i started using the folder with followed by page.mdx file, but i've one small question when we render custom component in mdx-components and use the tailwind typography plugin it will mess-up css right?

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

[@hamedbahram]

My pleasure Glauter! Importing components into your `.mdx` files depends on what library you're using. For the `next-mdx-remote` you can pass the component to the `components` attribute` of your mdx provider. If you use the `next-mdx` package you just import the component in the `.mdx` files similar to any other component.

[@glautermoulin]

@@hamedbahram Thank you Hamed. I'll look for documentation on how to implement the solution you recommended. But I'm imagining that perhaps it would be simpler for me, instead of creating the blog using the architecture of your excellent tutorial, which I managed to implement successfully, to create a route for each post, including in the routes the components that are necessary for each post.

[@hamedbahram]

@@glautermoulin That'll work too.

[@glautermoulin]

@@hamedbahram Thank you !

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

[@hamedbahram]

No it doesn't. I actually hose all my content inside the application without any separate CMS. Separate CMS would be useful, if you have non-developer content creators/writers.

[@morejoylodra]

@@hamedbahram So, let’s say you want to write a new blog post, do you directly write and update it through GitHub? In other words, do you manage the mdx contents through github?

[@hamedbahram]

@@morejoylodra no I write it in my code base locally and commit the new post or update like any other change. But you can use Github directly as well...

[@morejoylodra]

@@hamedbahram Sounds good. Thanks!

[@hamedbahram]

@@morejoylodra my pleasure.

[@udaym4204]

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

[@hamedbahram]

I'm glad you found it helpful. That's an interesting idea, I'll have backend dev in mind for future videos.

[@GabrielMartinez-ez9ue]

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

[@hamedbahram]

Yeah you can use `gray-matter` to extract frontmatter out of your markdown. You can read my implementation here: www.hamedbahram.io/notes/using-mdx-with-nextjs#frontmatter

[@usmansoomro4668]

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

[@hamedbahram]

You can read all blogs metadata and search through that.

[@inderjotsingh5868]

which extension you are using for cursive style in the syntax

[@hamedbahram]

It's Dark plus with Italics theme in vscode

[@owaizyusufi4989]

Hello, first of all thank you for this video it helped a lot but, unfortunatly I got stuck in one place i.e. I am getting this error Error: Expected component `CodeBlock` to be defined: you likely forgot to import, pass, or provide it. It’s referenced in your code at `317:1-317:24` when ever I try to include js components do you have any idea what's could be the issue. Note: When ever I remove the js Components it works perfect. Any assistance would be appreciated.

[@hamedbahram]

To be able to use components in your mdx pages, you need to pass the components to your mdx provider.

[@owaizyusufi4989]

@@hamedbahram Thank's for your reply. Just a thing to confirm. Just want to know that should I add the mdx provider to provider.js (which is pre build by nextjs) or should I add it to the layout.jsx of my (site) folder. As I have already added it in my layout.jsx But the issue still the same as before?

[@hamedbahram]

@@owaizyusufi4989 depends on whether you're using the next-mdx-remote or the next-mdx library, you can refer to my code (link in the video description) checkout the branch that uses the same package and see the implementation.

[@owaizyusufi4989]

@@hamedbahram It still gives me error can you help if I provide my stackoverflow query or my code?

[@GabrielMartinez-ez9ue]

I have a quick question: Have you ever tried to use Image component inside of an MDX file? If so, can you please share?

[@hamedbahram]

You'd have to either create a custom image component or pass the Image component (next/image) to your MDXComponent.

[@GabrielMartinez-ez9ue]

@@hamedbahram Yeah, I did that.. but it complains that i cannot in a 'client component' due to exporting meta

[@hamedbahram]

@@GabrielMartinez-ez9ue I see 🤔 let me test this out.

[@mehranjamali707]

This is awesome, thank you

[@hamedbahram]

Anytime Mehran!

[@supananchotteratat]

I don't style my content (tailwind and in mdx-component file) and the bullet point is disappear. Is this the normal thing or I do something wrong?

[@hamedbahram]

Tailwind removes the bullet marker from list elements by default.

[@supananchotteratat]

@@hamedbahram Thanks for your reply, I have one more question. I didn't install Tailwind but the bullet points are still missing, # and ## are the same size. ps. I didn't style anything in page or css file.🙏

[@abhrajitray951]

Good content

[@hamedbahram]

Thank you!

[@checkhere-t2n]

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

[@hamedbahram]

Hello! I'm not sure what you mean by not overwriting, but you can pass in a `components` object to your MDX provider (depending on which package you're using) mapping your custom components. Does this answer your question?

[@matarloum2894]

Tailwind Typography notworking for me. The file remain unstyled

[@hamedbahram]

You have to install the `@tailwindcss/typography` package, add it to your `tailwind.config.js` as a plugin and then use the `prose` class on the parent component of your MDX content.

[@matarloum2894]

@@hamedbahram i have done both already. i'll try again.

[@tnnz9920]

Hello sir, can u make new video about this but using content layer? I was so curious bout how to combine it

[@hamedbahram]

Hey! Absolutely... I'll cover that in next two weeks.

[@MdMinhaz-h4e]

From where to import the compileMDx func? if i import from : import {compileMDx} from "next-mdx-remote/rsc". gives me an error.

[@hamedbahram]

you need to import it from `next-mdx-remote/rsc` and you have to make sure you're importing it on the server, either inside your server components or modules than run on the server.

[@melon__mochi]

You saved me

[@hamedbahram]

Glad to hear that!

[@webdevmix]

For your example using `next-mdx-remote`: How can we make this work for mdx files that import and use React components? It appears the frontmatter parsing interferes with the React import?

[@hamedbahram]

You should not import your React components in the MDX file. Instead, just use the React component in the MDX file and pass all the components you have used to the `components` prop of the

[@morejoylodra]

Hi, Hamed. Thanks for the video. What’s your opinion on PostgreSQL vs MongoDB? I heard postgres can store JSON files now.

[@hamedbahram]

Hey! I love both 😁 but tend to use MongoDB a bit more.

[@morejoylodra]

@@hamedbahram Hope you’ll make videos on postgreSQL soon 🥹

[@yauul]

Thank you Hamed for the video. Just wanted your opinion on using MDX to render your blog post compared to something like Sanity. Mostly concerned with simplicity and maintainability. Thank you.

[@hamedbahram]

My pleasure! If you're comfortable creating your content in markdown (mdx) I would go with that. Sanity or any other CMS for that matter is good for non-technical writers/content creators. Hope that helps :)

[@yauul]

@@hamedbahram Thank you for your advice.

[@hamedbahram]

@@yauul Anytime!

[@joylodralive]

Hi Hamed, is it possible to store the MDX files in a cloud and have them called and shown up in the web?

[@hamedbahram]

Hi Joy, if you use the `next-mdx-remote` package you can fetch your MDX files from any remote storage.

[@chief37]

This was great! I am seeing that you can import components within mdx and use them. Once I add metadata like the date and title the imports no longer work. Any ideas on what I might be missing? For context I have a codeblock component that is being styled with prismjs because I want to write blog posts with code blocks in them.

[@hamedbahram]

Are you using `@next/mdx` or `next-mdx-remote`? the first one doesn't support frontmatter out of the box. `next-mdx-remote` however does support frontmatter, but you have to pass a flag to parse it as I demonstrate in the video.

[@brennenrocks]

How do images work?

[@hamedbahram]

You can create a custom component for your images and pass it to the `components` prop of your MDX provider.

[@najatiscoding]

Thank you Hamed! I have some questions, I'm trying to build a documentation website that can scale, is markdown suitable for that? And I followed your tutorial and it really helped me understand it, but I want to use the Nextra template in next.js13, is it possible? and can you help me start by sharing some recourses please.

[@hamedbahram]

Yes I think markdown is suitable and scalable for that matter. I've seen folks using Contentlayer that makes it very easy to work with mdx, you can dig into it here: www.contentlayer.dev/ I haven't used nextra personally, but I'll be creating a video on it soon, hope that helps.

[@najatiscoding]

Thank you, looking forward to it.

[@sohrabkhan101]

Please make a video on shopify with next js. Thank you

[@hamedbahram]

Sure Sohrab, that makes a good video! Thanks for your input.

[@sohrabkhan101]

@@hamedbahram Great! I'm looking forward to seeing the video. Just a friendly reminder, could you please create it as soon as possible? I'm really excited to watch it. Thanks again for your hard work!

[@hamedbahram]

@@sohrabkhan101 sure.

[@KamalSingh-zo1ol]

great video, but your source code link is not correct.

[@hamedbahram]

Did you check the corresponding branches: `mdx` or `next-mdx-remote` depending on which one you're using.

[@KamalSingh-zo1ol]

@@hamedbahram Yes got the branches. Thank you so much. Very simple solution, just had to make some changes to keep typescript happy. Although curious about performance when using async functions. Would it withold stress test og having let's say 100,000 blog posts.

[@GaryWallace-g6r]

export default function Hello({ children }) { return {children}; } =>has to return something!

[@hamedbahram]

Sure!

[@subproject2771]

MDX hot reload not working

[@hamedbahram]

It should work! not sure why this may be.

[@eedeenet]

have you tried using images? its not that easy

[@hamedbahram]

Yes I have and it's pretty straight forward. You need to create your own custom image component that wraps the `next/image` component and then pass your custom image component to your mdx components so it will use return that whenever it encounters the `img` tag.

[@eedeenet]

@@hamedbahram Not so easy. I want to be able to use images like  in my md. I have tried with all sorts of rehype and remark plugins. Then I had to use e.g. the copyWebpack plugin to e.g. use images outside of the /public dir. also write a custom mdx image component that has the page slug as an attribute (e.g. /tutorials/tutorial-1/). now i am able to . but not straightforward at all

[@rasi_rawss]

This was difficult to learn anything from.

[@hamedbahram]

Sorry to hear that! what part specifically did you find confusing?

[@subproject2771]

Why your Github (any branch) missing the code from video> Not cool. Dislike

[@hamedbahram]

Check the `mdx` or `next-mdx-remote` depending on whichever library you're using.