Next.js Image - Never struggle again (+ ImageKit)

แชร์
ฝัง
  • เผยแพร่เมื่อ 27 ก.ย. 2024

ความคิดเห็น • 36

  • @ByteGrad
    @ByteGrad  4 หลายเดือนก่อน +1

    Hi, my latest course is out now (Professional React & Next.js): bytegrad.com/courses/professional-react-nextjs -- I'm very proud of this course, my best work!
    I'm also a brand ambassador for Kinde (paid sponsorship). Check out Kinde for authentication and more bit.ly/3QOe1Bh

  • @abishekbaiju1705
    @abishekbaiju1705 5 หลายเดือนก่อน +10

    I was struggling so much learning this Image container. I was surprised to see you made a video about this topic. Felt like you made it for me. don't stop making videos about nextjs. You are helping me a lot. Thanks a lot.

  • @siya.abc123
    @siya.abc123 5 หลายเดือนก่อน +22

    This is premium content, it feels illegal to watch for free. Thank you for sharing, images are the hardest pain point for me

    • @ByteGrad
      @ByteGrad  5 หลายเดือนก่อน +1

      Enjoy!

    • @reactjs1900
      @reactjs1900 5 หลายเดือนก่อน +2

      Give him a super thanks then...

    • @jsbr
      @jsbr 5 หลายเดือนก่อน

      Technically every video is not free, you pay your attention to this very specific video and the cost is your time. Nevertheless, good video.

    • @KiranPrajapati-eo9jr
      @KiranPrajapati-eo9jr 4 หลายเดือนก่อน

      good

    • @KiranPrajapati-eo9jr
      @KiranPrajapati-eo9jr 4 หลายเดือนก่อน

      @@jsbr yes

  • @warodomwerapun6417
    @warodomwerapun6417 5 หลายเดือนก่อน +1

    That is a good explanation; I came across your video when I checked the Nextjs and VPS with the docker video. Well done!!

  • @meloniasz1
    @meloniasz1 5 หลายเดือนก่อน +1

    Great explanation! Was looking for tutolial like this for several days

  • @WaltersWatching
    @WaltersWatching 5 หลายเดือนก่อน +1

    been using the imagekit free plan for 4 years without issue

  • @guts909
    @guts909 5 หลายเดือนก่อน +2

    You helped me a lot, thank you!

  • @nicolascuor2378
    @nicolascuor2378 5 หลายเดือนก่อน +1

    Thank you for this instructive content!

  • @hbela1000
    @hbela1000 5 หลายเดือนก่อน +2

    Awesome video !

  • @olusanyaolamide9764
    @olusanyaolamide9764 5 หลายเดือนก่อน +1

    Wow thank you, Image has always given issues

  • @kickflipz
    @kickflipz 5 หลายเดือนก่อน +1

    Awesome video I learned a lot thanks

  • @jacquelynecarmen
    @jacquelynecarmen 5 หลายเดือนก่อน +1

    Thank you sir ❤❤❤❤

  • @abdarker1043
    @abdarker1043 5 หลายเดือนก่อน +4

    amazing video. i wish i had this video 1 year ago. now i know i messed up a lot back then

  • @shahwaizkarim-h9z
    @shahwaizkarim-h9z 5 หลายเดือนก่อน +1

    When I make a web app having a container with many cards in it there I face many problems like when I resize my screen the images lose their quality and aspect ratio is not maintained. How to solve this problem please guide or make a separate video on it using nextjs I will be grateful to you!!

  • @marmunator
    @marmunator 4 หลายเดือนก่อน +1

    Hey thanks for your video! Quick question, your media library doesn't show the file format. Is there some setting you have on that makes it behave this way?
    In your video, your source for the image is "stockprices" instead of "stockprices.jpg". I tried to upload my images to imagekit, but when ever I leave out the file format (.png in my case), the images wont show up.
    Any ideas?

  • @qsales2022
    @qsales2022 5 หลายเดือนก่อน +1

    U are underrated 😢

  • @raves_r3177
    @raves_r3177 4 หลายเดือนก่อน

    What if I want to give blur placeholder in a next/image that has a dynamic src

  • @muzzrayyan1290
    @muzzrayyan1290 5 หลายเดือนก่อน

    In the masonry secrtion, video does not tell us how to use that metadata api for height, it just cuts abruptly can anyone help how to?

  • @Smartercow
    @Smartercow 5 หลายเดือนก่อน

    Supabase does the same with optimizing images

  • @asmet_2701
    @asmet_2701 5 หลายเดือนก่อน

    Hi I wanna add an e-commerce store app for my portfolio. I wonder which react stack is solid for it in 2024. Can someone suggest something? As a back I would prefer Firebase, also for styling scss+mui but need recommendations about state manager and other technologies and tools. Thanks!

  • @tomich20
    @tomich20 5 หลายเดือนก่อน

    yesterday i had to remove optimization in production, never could it make it work :/

  • @kar-s6716
    @kar-s6716 5 หลายเดือนก่อน

    I hate Image ... always struggling to replicate the same ui with this component

  • @MarkCarson-w3e
    @MarkCarson-w3e 10 วันที่ผ่านมา

    Amazing video! One question - how does the h-auto work on the masonry effect if the fill layout mode of the Next.js image sets the image to cover absolutely? The height of the containing div collapses to zero for me.

  • @ramez3038
    @ramez3038 4 หลายเดือนก่อน +1

    like what the actual FUCK
    this video changed my life i was struggling alot with next Image and i didn't know we get all those features from it
    thank u brother i really appreciate it

  • @smart0758
    @smart0758 5 หลายเดือนก่อน +1

    Is this feature available when deploying outside Vercel?

    • @Euquila
      @Euquila 3 หลายเดือนก่อน

      I don't believe so, it's proprietary storage/functions solutions that we are using when we deploy to vercel. You would need to write your own services to process the images and make them available through your own storage layer.

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd หลายเดือนก่อน +1

    Thank you so much

  • @tasfiqjawaad3757
    @tasfiqjawaad3757 4 หลายเดือนก่อน

    If we don't want to use the loader thing, i.e. want to keep the image component server side, how can use set srcSet? I know that nextjs will automatically handle that, but if we're using transformation using the URL(query parameters for imagekit) and want to display different url for different sizes, how would nextjs know how to transform the images?

  • @hbela1000
    @hbela1000 4 หลายเดือนก่อน

    Hi, I have still an issue: How to upload image ? (need transform, before upload too).