Next.js + MDX Crash Course

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

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

  • @datdoesthings
    @datdoesthings 2 года назад +1

    Dude, awesome tutorial. Super straight forward and to the point. Exactly what I needed to see how to style my components. Thanks!

  • @artiphishle
    @artiphishle 2 года назад

    ha! love the fast-writing to not consume time by creating a new component. 👌

  • @erickgeneric
    @erickgeneric 2 года назад +1

    Hey bro - this helped a lot. Subscribed!

  • @omkarnarayankar5275
    @omkarnarayankar5275 2 года назад +1

    I love short tutorials and was on point. Thanks

  • @Maegop88
    @Maegop88 2 года назад +1

    Great tutorial Benjamin, I like your content, I learn a lot with with videos, thanks

  • @thrivingcreator
    @thrivingcreator 2 года назад

    At 2:48 we see that you're getting syntax highlighting for the `import Button from ...` line. And you also got some autocomplete while you were typing that line. What extension are you using to get that syntax highlighting and autocomplete?
    I have the MDX extension by "unified" installed but it does not syntax highlight the import statement or provide autocomplete on it.

  • @hyggedev2124
    @hyggedev2124 2 года назад

    Explain how you loop through all your markdown files! 👌💯

  • @adithyapaib
    @adithyapaib 3 года назад +3

    Can u make video for how to use gsap in nextjs

  • @vetofficial
    @vetofficial 2 года назад

    very helpfull bro seriously

  • @cw3dv
    @cw3dv 3 года назад

    Wow, that was helpful, keep it up!

  • @JetJockey87
    @JetJockey87 2 года назад

    How did you get those beautiful vsc icons in your Explorer my guy?

  • @parkerrex
    @parkerrex 3 года назад +1

    hey Ben - this is a great tutorial. I didnt realize you could use react components inside mdx files. New sub! Race you to 10k ;P

    • @BenjaminCarlson
      @BenjaminCarlson  3 года назад

      Yep! One of the best things about mdx. And you're on!

  • @harshthosar8600
    @harshthosar8600 2 года назад

    Great video 💯

  • @LongBoy.0
    @LongBoy.0 3 года назад +2

    Not sure how this is any faster than just statically rendering your pager with getStaticProps. Could you explain further?

    • @parkerrex
      @parkerrex 3 года назад

      the page can use getStaticprops but its the output of the file that the browser reads that makes the performance differences. Ben correct me if im wrong.
      for instance I use getStaticProps on my personal site to get article titles, descriptions, etc but the output is mdx and Ill get a high 90 lighthouse score instead of high 80.

  • @Neetigya
    @Neetigya 2 года назад

    Is it possible to pass props to mapped component through markdown syntax? For example sometimes I want the text color to be white, sometimes black and I don't want to wrap the text inside any component like in typical jsx file.

  • @cryptodev2615
    @cryptodev2615 3 года назад

    Ahhh man just wish you added frontmatter so we can turn this into a blog! Great vid tho

  • @Alex-scc
    @Alex-scc 2 года назад

    Second example with styling inlineCode don't work on nextjs with ts. Have u any idea why?
    const CustomCode = (props) => {
    return
    }
    const MDXComponents = {
    p: (props) => ,
    inlineCode: (props) => CustomCode,
    }
    export default MDXComponents;

  • @khandoor7228
    @khandoor7228 3 года назад +1

    Excellent!

  • @kid_rz
    @kid_rz 3 года назад

    sir, chakra ui have responsive column like bootstrap ? like col-6 col-12 ?

    • @BenjaminCarlson
      @BenjaminCarlson  3 года назад

      You can use grid layout to achieve that: chakra-ui.com/docs/layout/grid

  • @parkerrex
    @parkerrex 3 года назад +1

    grab tailwind next time instead of wrapping!@

    • @BenjaminCarlson
      @BenjaminCarlson  3 года назад

      Just wanted to keep things simple in this video!

  • @iamdanfleser
    @iamdanfleser 2 года назад +1

    Why are u lookint at the camera like someone points a gun at you:)))