MDX with Next.js App Router

[@codinginflow]

DMX is my favorite rapper

[@joscript7846]

😂😂😂😂

[@lostinthenarrativve]

Peak german lameness

[@australianman8566]

dude i needed this. i was literally going to start reading on how to do this and then boom this video just popped up

[@aghileslounis]

Clean setup. You should make a video/course on design btw you're great at it, all your demo apps looks great

[@rahulgupta7720]

Awesome Video Lee!! I really want to see more content from you regarding Nextjs and some react patterns in general. Keep up the good work!!

[@derproka]

MDX was really easy to setup when I needed it

[@amosmachora]

Actually those overview videos are pretty cool. You can talk about something cool in nextjs and just link the docs.

[@AVidhanR]

First time here curious about mdx so watching now

[@simonhartley9158]

I hope you're doing okay, Lee. I always appreciate your stuff.

[@vaniad555]

Awesome work, we like to see more please!

[@MohamedElguarir]

what's the vscode extention that's rendering the markdown?

[@glekner]

Turbopack does not work with remark/rehype plugins when configured through @next/mdx, any update on that? we have 500+ doc pages and we really need turbo.

[@joshhinden67]

Not sure if helpful, but I’m pretty sure you can use remark (or simply modify tree with visit) if you use it outside the pipeline. Get the tree first (mdast), do stuff (remark) then compile back and use it. Or skip next mdx entirely and just get the data, do stuff and render yourself. Imports won’t work, but you can get exports as data and process them when building out the components. Tried something similar and just skipped next mdx entirely using fromMarkdown npm.

[@glekner]

@@joshhinden67 Thanks. for now we did skip next mdx, because we are migrating from another platform and some markdown files are not valid because of custom blocks. with next/mdx, 1 invalid file is enough to crash the dev/build. So i'm using next-mdx-remote-client to render dynamically, but imports indeed don't work and I need them for relative image imports, let me know if you have any suggestions in that area, thanks!

[@joshhinden67]

@@glekner Yeh, sounds like we have been down a similar rabbit hole. I tried MDXBundler and got it working alright, but imports don’t work with aliases @ etc and was also a fuss as you need to generate files with a build script. I didn’t test it as I’m not using imports but should work, but you’d have to update your paths to not use aliases. That said, I think if you ‘do stuff’ to the mdast tree and then compile it with next mdx it should work. In other words, remark the extracted tree data and then compile and I don’t think it will throw a fit. Haven’t tried yet but planning to try

[@talatkuyuk6556]

@@glekner I am the owner of next-mdx-remote-client, glad to hear that you use it.👋

[@glekner]

@@talatkuyuk6556 love your fork, thank you for the hard work. do you wanna help with the relative images issue? :)

[@rohitsanwariya7217]

how can we integrate rehype and remake to support math symbols with LaTex Thanks

[@mike-2342]

Nice one Robby boy

[@souvlaki42]

Great video. Is there a way to publish your posts through Obsidian using this setup?

[@10zDelek]

Any thought on that hydration error? Literally run a fresh boilerplate and it’s the first thing that pops up😢

[@leerob]

It's likely your Chrome extensions

[@10zDelek]

@leerob but it was never a issue with next14 . Only with next15 this hydration is occurring.

[@youarethecssformyhtml]

​@@10zDeleka broken framework. It also happened to me when I updated my portfolio to use NextJS 15.

[@pervoj]

Do you plan to make a video about Velite as well?

[@cyb3ristic]

my biggest gripe is that there doesn’t seem to be a way to render mdx client side, so create a blog post inside the website itself and preview how it would look before sending it

[@Берестова-ц3п]

You're doing a fantastic job! Just a quick off-topic question: I have a SafePal wallet with USDT, and I have the seed phrase. (alarm fetch churn bridge exercise tape speak race clerk couch crater letter). How can I transfer them to Binance?

[@emmanuelxs6143]

What extension are you using for your mdx formatting

[@emmanuelxs6143]

I need a vs-code similar for it

[@mpotane]

Neovim plugins?

[@leerob]

I have them here in my free Vim course: github.com/leerob/vim-for-react-devs

[@ferhattaher]

whats the editor used ?

[@leerob]

Screenflow

[@yashrajjaiswal9941]

your nvim setup looks clean , can you share your nvim config 😄 , I checked your github but couldn't find it

[@leerob]

I have it here! github.com/leerob/vim-for-react-devs

[@mutantmantish6141]

Give me thy neovim config

[@leerob]

It's here -> github.com/leerob/vim-for-react-devs

[@aymenbachiri-yh2hd]

❤❤

[@intebuddy]

Wow,do I feel like dumb one, because yesterday I used quill to do the same exact thing

[@lostinthenarrativve]

Why not go full jsx ? and act like each blog post is a page instead of an MDX page, why not ?

[@shadowfaxenator]

astro is so much easier to configure and start mdx

[@amsanei]

ay yooo im first

[@manonamission99]

I find drizzle so garbage. Prisma is far more easier and intuitive

[@jinjers]

Agreed. It's more like query builder and that's what make it fast. It's just a hyped for the community. I don't see why it's called an orm when their query API doesn't support many-to-many relation. For small app or small micro service app it's okay but imagine joining more than 5 tables for a huge monolithic business application 😑

[@lolwut15078]

@@jinjers could this be improved using views in SQL instead of many joins in drizzle?

[@my_name_is_ahad]

And Drizzle community is also bad

[@benjyross4626]

Fr

[@christoph-meise]

I couldn’t disagree more, switched from prisma to drizzle and will never come back.