You're Doing Image Rendering WRONG in Next.js!
Рет қаралды 59,301
Күн бұрын🚨 Join the world’s BEST developer community “Zero to Full Stack Hero”: www.papareact.com/course
📩 Want coding problems (with solutions!) delivered to your inbox daily? www.papareact.com/dailycoding...
🔴 LOOKING FOR THE CODE? 🛠️
links.papareact.com/github
👇🏻FOLLOW ME HERE:
Instagram: links.papareact.com/instagram
Facebook: links.papareact.com/facebook
LinkedIn: links.papareact.com/linkedin
Twitter: links.papareact.com/twitter
Discord: links.papareact.com/discord
Newsletter: links.papareact.com/newsletter
💰 WANT TO SUPPORT THE CHANNEL?
Donate here: links.papareact.com/donate
Grab some PAPA Merch: links.papareact.com/merch
🕐 TIMESTAMPS:
00:00 Introduction
00:46 Skillshare Sponsorship
02:20 Explaining the Next.js Image Component
05:03 Implementing the Next.js Image Component
07:23 Comparing JPEG and WEBP images
08:19 How to pull a Remote Image using the Image Component
14:00 Dynamic Image Sizing based on Screen Size
16:48 Bonus Tip! (Eliminating Image Load Flicker)
18:34 Implementing a Built-in Loader
19:47 Summary: Next.js Image Component vs HTML img Component
21:26 Outro
Let’s get it PAPAFAM 🔥.
#reactjs #nextjs #tailwindcss
@SonnySangha Жыл бұрын
📬Do you want DAILY coding problems sent DIRECTLY to your Inbox? (with solutions the next day) 👉 links.papareact.com/university
@GabrielMartinez-ez9ue 2 жыл бұрын
You answered every single question I had! I had my doubts on how to use the Image component so my only solution was to add a parent element with position relative and sometimes font-size: 0 to remove a small padding from the bottom that forms.
@premiumrealtyng 2 жыл бұрын
We can all agree Next Image is that component we know we really need, but quite frustrating to use. This video puts everything in perspective now Thank you so much ❤️
@PlayWithNiz 2 жыл бұрын
Solid understanding and explanation of next/image - Really informative!! 💯💯💯 I'd love a video on how best to load fonts in a next app. Especially local fonts given they don't seen to have the same kind of optimisations as external google fonts! I've seen some websites that manage to use non-google fonts without any flicker, as if they're pre-preloaded in some way!
@BrianHHough 9 ай бұрын
This is truly such a helpful video. Not including in parent div that `position: relative` prop was such a blocker for me. Can't believe this approach isn't more documented. Thank you for explaining this so well as you always do, Sonny!!!
@bencarter8108 2 жыл бұрын
Didn’t know about the built-in-loaders before, that’s incredible! Keep up the awesome content Sonny, we love it!
@SonnySangha 2 жыл бұрын
Thank you Ben!! You’re awesome keep the energy alive!
@vaniad555 2 жыл бұрын
I thought I knew all about Next.js Image, but the detail in this video is awesome!
@inderpreetsingh2138 Жыл бұрын
I am facing those image related issues from last week Now I find my solutions here Thank you so much bro 🤗
@superecureuil7236 Жыл бұрын
ty you save my day just with the relative position of the parent container
@PattyBeautCode 2 жыл бұрын
This is what I am looking for, I will start the Next.js project series journey very soon !
@tinotaylor 2 жыл бұрын
Looking forward to this one. Still a few gray arrays with the next image component that I'm not 100% on
@eduardoaviles357 Жыл бұрын
Top notch info for . Now I can really optimize my website images for mobile. Thanks.
@ifaizanMK 2 жыл бұрын
your way of teaching is second to none! I'm waiting for a tutorial on REDUX!!!
@k1mpman Жыл бұрын
Great video, filled with information. Thanks a bunch!
@Taooflu Жыл бұрын
Great video my man! One small thing, that background music had a sonar ping? It was quite distracting!
@PostcardsFromJapan Жыл бұрын
Very detailed and clear explanation. Thank you!
@correctcode367 2 жыл бұрын
After watching this amazing content, I know how I can use the Image component in nextjs and make my app very faster in rendering images. Thanks a lot Sonny! 💖💖💖 #PAPAFAM 💖💖💖
@Abhi.Fit. 2 жыл бұрын
Great quality content as always! Keep killing it bro 💪
@SonnySangha 2 жыл бұрын
Thank you brathaaaa!!! 💯
@thecutedreamkostasp.4449 Жыл бұрын
Great video! I have a question! Dont images on pupblic folder consider static? Or you have to import them to consider static? Because i am calling images from public folder like /image.jpg and i need to provide the height and width else it causes me an error! Thx in advance
@birukyonas9913 2 жыл бұрын
sonny This is why you are my favorite we need this kind of videos too man Keep up : )
@billelbahani 2 жыл бұрын
Absolutely the best dev tutor , cheers from Algeria.
@chillside Жыл бұрын
thank you 🔥This is what I am looking for!
@sujoyinnovates Жыл бұрын
How can we prevent cumulative pulls of image when screen size changes. Because eventually the cumulative size (added up) is adding to the bandwidth.
@delvinshoko8088 Жыл бұрын
Your videos are fire bro. Keep up the great work. Love your content
@waiswadonnie3921 2 жыл бұрын
Am pumped for this one
@UmarFarooq-sz8ht Жыл бұрын
Thank you so much. I just upgraded from Making Waves, so the concepts are familiar, but tNice tutorials is a whole new world! Look forward to
@richardaginga8901 Жыл бұрын
Hi. I want to use an image I imported from a database. How do I do it without crashing into an src error?
@skverskk Жыл бұрын
lGreat tutorial. I've been actuallt trying to embed the component into the image, but to no avail. Is this even do-able or am I mussing somethinh?
@muhammadbabar7678 Жыл бұрын
After Next.js build command does not open newly uploaded images at runtime on production. Any suggestion ?
@emmanuelotuonye1250 Жыл бұрын
Much better explanation than the official documentation. 💯
@adelakunemmanuel5863 2 жыл бұрын
@Papareact @sonny @jay what do you feel about using MySQL Database with React ? Im feud with Firebase documentations and upgrade... I keep running my codes right but errors never stop, I'm actually good in MySQL query... can I just implement this as my backend ??
@ge7579 24 күн бұрын
Great Video. Thank you very much. May anybody help me with and issue that I have in production? Images comming from backend dont load when navigate between pages. I have to refresh pages to display images. This behavior occurs only in production. Everything works fine in dev mode. Any clue?
@RicardoMartins84 Жыл бұрын
objectFit is deprecated (14:10) / next 13.2 use style={{objectFit:"contain"}} instead
@Human_Evolution- Жыл бұрын
Love the video and you have a positive vibe.
@mohdsahil226 Жыл бұрын
Thanks! After build it is not showing! url shows _next/image?url. Please help!
@unifiedcodetheory8406 Жыл бұрын
What's the difference between storing images remotely and storing them inside your project's "public" folder?
@DinitoThompson Жыл бұрын
Nice ! Could you also show us how to add CSS to the Image component using tailwindcss.
@amanali9501 Жыл бұрын
This is why I do not use nextjs image yeah
@user-cl8hi9jw3b Жыл бұрын
thank you, very helpful!
@philipherlambang2742 Жыл бұрын
Can we implement image component load from AWS cloudfront?
@rebazjabar7660 Жыл бұрын
i integrated the nextjs with mongodb but when i get the image by using , loading image take much more time than , why this is happen to me that is vice versa from your video ?
@cainephung481 Жыл бұрын
19:31 sounds like music to my ears!
@HackaholicTV Жыл бұрын
Thank you, very usefull!
@samanahrari75 Жыл бұрын
Hello. It was a very great video about Image component in next js! Thank you! But i have a question. How can i style the Image component using tailwind css?
@ArcticPrimal Жыл бұрын
You cant, no ever mentions that the cons of using it, is that you can really style it directly so some style or animation might not be possible.
@SahilPatel-fb3ib Жыл бұрын
hey Sonny, how to use onError in 'next/image'. Can you please make a video on that.
@SuperValza Жыл бұрын
Great video. Keep up good job.
@julientavernier1174 Жыл бұрын
Hi Sonny 👋 for me when i try priority with i have same load flicker on my image with same code :(
@DanteMishima 2 жыл бұрын
My question is how you use it with Tailwind without the relative div
@user-jf6fd4fl5l Жыл бұрын
좋은 강의 넘나 고맙습니다!
@markus_dev_cwb Жыл бұрын
Tks Man!!!
@user-il7yx7jn2v 2 ай бұрын
Why PNG and JPEG images are not working properly in Next.js 14 pls help me ...
@remixrunuppsala9641 2 жыл бұрын
Great video!
@quynle469 2 жыл бұрын
please make a video about cookie consent in nextjs. because I haven't found anyone to do this yet
@sakthivelr3756 Жыл бұрын
i am getting error of invalid url while using nextjs image component
@karthicksivasamy8072 2 жыл бұрын
You doing Great Sonny
@pritamupadhya3517 Жыл бұрын
I've been unable to use next js Image because it was just difficult to understand and I am very lazy to learn new things. But you explained it so easily i can't believe i wasted all this time ignoring such a helpful feature from next js. Thank you brother.
@TWGrops Жыл бұрын
Hi great vid but my image seems to be expanding larger than the div when using image tag: CSS .bannerContainer { width: 100px; height: 250px; min-height: 250px; //been trying all sorts max-height: 250px; background-color: blueviolet; position: "relative"; } NEXTJS
@TWGrops Жыл бұрын
Resolved my linter made position: "relative"; in quotes so the browser thought it was invalid
@elpapito24529 2 жыл бұрын
Simply AMAZING
@kulvirsingh4568 2 жыл бұрын
Awesome 🔥🔥
@fernandopiolimartinez4111 Жыл бұрын
I'm from Argentina and my english is some basic, but you are like Messi when teaching Next.js
@BrianArtea 2 жыл бұрын
Really cool!!!
@krisnrg 11 ай бұрын
Next image is readily frustrating and doesn’t work well with CDNs we need up writing our own that works much better. Awesome explanation though
@HarikrishnanSrinivasan 10 ай бұрын
I'm building a nextjs website and have doubts in choosing and integrating a CDN , could you please guide me? Thanks
@lycan2494 Жыл бұрын
thanks bro
@aadarshGupta7777 Жыл бұрын
Thanks
@dineinoussa1361 2 жыл бұрын
U're awesome dude
@younesessaadani9303 2 жыл бұрын
Guys any one can give me a documentation or video on how to host next application with laravel and mySql as a backend I need it please 🙏
@juwonoladele320 Жыл бұрын
Is it possible to use tailwindcss to add styles to the image
@ArcticPrimal Жыл бұрын
You cant, no ever mentions that the cons of using it, is that you can really style it directly so some style or animation might not be possible.
@unifiedcodetheory8406 Жыл бұрын
@@ArcticPrimalWhat do you guys mean? You can add a className prop to the nextjs image component
@ArcticPrimal Жыл бұрын
@@unifiedcodetheory8406 can you style the image component? change the size etc using css or tailwindcss?
@ghofranedarragi5601 Жыл бұрын
thanks for this video
@SonnySangha Жыл бұрын
Thanks for being awesome!
@mrisholukamba1696 2 жыл бұрын
Man the intro song is lit..name pls
@nested9301 11 ай бұрын
aslo u need to pay vercel for the optmization if u exceeded the limit of the 1000 image 🤡🤡🤡
@SonnySangha 2 жыл бұрын
❗The first 1,000 people to use the link or my code sonnysangha get a 1 month free trial of Skillshare: skl.sh/sonnysangha05221
@universecode1101 2 жыл бұрын
Great man I can’t wait for Reddit clone 😜
@ataulmohsin4929 11 ай бұрын
shoda
Sonny Sangha
Рет қаралды 96 М.
Bruno Antunes
Рет қаралды 41 М.