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

👉 Signup for ImageKit’s forever free plan: bit.ly/49zmXkt
👉 Know more about ImageKit: bit.ly/3VXRK7u
NEW React & Next.js Course: bytegrad.com/courses/professi...
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Check out Kinde for auth and more bit.ly/3QOe1Bh
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Web development roadmap 2024 & 2025: email.bytegrad.com
👉 Email newsletter (BIG update soon): email.bytegrad.com
👉 Discord: all my courses have a private Discord where I actively participate
👉 Kinde: check out Kinde for auth and more bit.ly/3QOe1Bh
⏱️ Timestamps:
00:00 Intro
00:42 ImageKit
01:58 Layout example 1 (simple)
02:10 Native img-tag
02:48 Next.js Image component
02:58 Width & Height props
04:42 Responsive images
05:56 srcSet & sizes
14:17 DPR / retina
15:48 Disable cache
16:36 Priority
17:06 Blur placeholder
18:29 Local image
20:03 Layout example 2 (full width, blog)
21:43 fill
23:09 sizes
24:06 What if there is padding?
25:33 Custom loader (connect ImageKit to Image component)
29:54 Layout example 3 (gallery)
32:50 Layout example 4 (bg image)
33:58 Layout example 5 (masonry)
#webdevelopment #programming #coding #reactjs #nextjs

Пікірлер: 31

  • @ByteGrad
    @ByteGrad19 сағат бұрын

    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Ай бұрын

    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.

  • @KiranPrajapati-eo9jr

    @KiranPrajapati-eo9jr

    26 күн бұрын

    good

  • @buddy.abc123
    @buddy.abc123Ай бұрын

    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

    Ай бұрын

    Enjoy!

  • @reactjs1900

    @reactjs1900

    Ай бұрын

    Give him a super thanks then...

  • @jsbr

    @jsbr

    Ай бұрын

    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

    26 күн бұрын

    good

  • @KiranPrajapati-eo9jr

    @KiranPrajapati-eo9jr

    26 күн бұрын

    @@jsbr yes

  • @meloniasz1
    @meloniasz1Ай бұрын

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

  • @warodomwerapun6417
    @warodomwerapun6417Ай бұрын

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

  • @guts909
    @guts909Ай бұрын

    You helped me a lot, thank you!

  • @abdarker1043
    @abdarker1043Ай бұрын

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

  • @hbela1000
    @hbela1000Ай бұрын

    Awesome video !

  • @nicolascuor2378
    @nicolascuor2378Ай бұрын

    Thank you for this instructive content!

  • @ramez3038
    @ramez303822 күн бұрын

    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

  • @kickflipz
    @kickflipzАй бұрын

    Awesome video I learned a lot thanks

  • @WaltersWatching
    @WaltersWatchingАй бұрын

    been using the imagekit free plan for 4 years without issue

  • @smart0758
    @smart0758Ай бұрын

    Is this feature available when deploying outside Vercel?

  • @tasfiqjawaad3757
    @tasfiqjawaad375710 күн бұрын

    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?

  • @jacquelynecarmen
    @jacquelynecarmenАй бұрын

    Thank you sir ❤❤❤❤

  • @user-vk6cb1zu7p
    @user-vk6cb1zu7pАй бұрын

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

  • @raves_r3177
    @raves_r317725 күн бұрын

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

  • @hbela1000
    @hbela100028 күн бұрын

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

  • @qsales2022
    @qsales2022Ай бұрын

    U are underrated 😢

  • @muzzrayyan1290
    @muzzrayyan1290Ай бұрын

    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?

  • @asmet2701
    @asmet2701Ай бұрын

    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!

  • @olusanyaolamide9764
    @olusanyaolamide9764Ай бұрын

    Wow thank you, Image has always given issues

  • @Smartercow
    @SmartercowАй бұрын

    Supabase does the same with optimizing images

  • @tomich20
    @tomich20Ай бұрын

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

  • @kar-s6716
    @kar-s6716Ай бұрын

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