MDX with Next.js App Router

Поделиться
HTML-код
  • Опубликовано: 13 дек 2024

Комментарии • 53

  • @codinginflow
    @codinginflow 13 дней назад +17

    DMX is my favorite rapper

  • @australianman8566
    @australianman8566 13 дней назад +4

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

  • @rahulgupta7720
    @rahulgupta7720 13 дней назад +1

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

  • @aghileslounis
    @aghileslounis 13 дней назад +4

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

  • @derproka
    @derproka 13 дней назад +1

    MDX was really easy to setup when I needed it

  • @AVidhanR
    @AVidhanR 12 дней назад

    First time here curious about mdx so watching now

  • @amosmachora
    @amosmachora 9 дней назад

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

  • @vaniad555
    @vaniad555 13 дней назад +1

    Awesome work, we like to see more please!

  • @simonhartley9158
    @simonhartley9158 13 дней назад

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

  • @mike-2342
    @mike-2342 13 дней назад +1

    Nice one Robby boy

  • @MohamedElguarir
    @MohamedElguarir 12 дней назад +1

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

  • @glekner
    @glekner 13 дней назад +3

    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
      @joshhinden67 13 дней назад

      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
      @glekner 13 дней назад

      @@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
      @joshhinden67 13 дней назад

      @@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
      @talatkuyuk6556 10 дней назад

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

    • @glekner
      @glekner 8 дней назад

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

  • @souvlaki42
    @souvlaki42 12 дней назад

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

  • @pervoj
    @pervoj 12 дней назад

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

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd 13 дней назад

    ❤❤

  • @cyb3ristic
    @cyb3ristic 10 дней назад

    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п
    @Берестова-ц3п 12 дней назад

    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?

  • @10zDelek
    @10zDelek 13 дней назад +1

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

    • @leerob
      @leerob  12 дней назад +1

      It's likely your Chrome extensions

    • @10zDelek
      @10zDelek 12 дней назад

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

    • @youarethecssformyhtml
      @youarethecssformyhtml 12 дней назад

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

  • @rohitsanwariya7217
    @rohitsanwariya7217 12 дней назад

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

  • @emmanuelxs6143
    @emmanuelxs6143 12 дней назад

    What extension are you using for your mdx formatting

  • @yashrajjaiswal9941
    @yashrajjaiswal9941 13 дней назад

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

    • @leerob
      @leerob  12 дней назад

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

  • @mpotane
    @mpotane 13 дней назад +1

    Neovim plugins?

    • @leerob
      @leerob  13 дней назад

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

  • @ferhattaher
    @ferhattaher 13 дней назад

    whats the editor used ?

    • @leerob
      @leerob  12 дней назад

      Screenflow

  • @intebuddy
    @intebuddy 13 дней назад

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

  • @mutantmantish6141
    @mutantmantish6141 13 дней назад +2

    Give me thy neovim config

    • @leerob
      @leerob  12 дней назад

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

  • @lostinthenarrativve
    @lostinthenarrativve 12 дней назад

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

  • @shadowfaxenator
    @shadowfaxenator 13 дней назад +4

    astro is so much easier to configure and start mdx

  • @amsanei
    @amsanei 13 дней назад

    ay yooo im first

  • @manonamission99
    @manonamission99 13 дней назад +16

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

    • @jinjers
      @jinjers 13 дней назад +5

      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
      @lolwut15078 13 дней назад +2

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

    • @my_name_is_ahad
      @my_name_is_ahad 13 дней назад +2

      And Drizzle community is also bad

    • @benjyross4626
      @benjyross4626 13 дней назад +1

      Fr

    • @christoph-meise
      @christoph-meise 12 дней назад +6

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