\n
sizes
Prop with the Image Component ๐จWe won't be diving into each one but only \"Not utilizing the sizes Prop with the Image component\".
\nTo watch the rest, you can check out my Youtube video here โ๏ธโ
\nsizes
Prop with the Image Component\nHere is a quick code snippet,
\nFor optimal performance benefits with Next.js's image component, it's essential to specify the sizes
prop along with fill={true}
property
to ensure the appropriate image size is served based on viewport dimensions.
Failure to do so may result in inefficient image loading, causing larger images to be downloaded unnecessarily. This means you'll download an image 3x the size on a smaller mobile device.
\nThis can easily slow down your app performance.
\nI've been asked to create a video a deep dive into Caching for a while now so here you go.
\nCheck out the below video on Next.js Caching or master Next.js by taking my completely free Crash Course.
\n\n Master Next.js Caching in 25 minutes \nโ\n | \n\n | \n Ultimate Next.js Crash Course ๐ \nโ\n | \n
Check it out and subscribe to my channel for more content related to Frontend, Leadership and Career Development. ๐ช
\n
Hey friend, I have some good news ๐. I've been working hard on offering a Exclusive Live Workshop on Next.js. Want to take your Next.js skills to the next level and learn how to build a production ready, modern and full stack app? well, this workshop is for you!! โYou can read more about the workshop here โ๏ธโ As a special thank you for reading my weekly newsletter, I plan to offer some launch discounts and exclusive bonuses to folks on the waitlist so please add yourself to the waitlist if you are interested.
Clicking this button will add you to the waitlist โจ Here are a five common mistakes I've seen developers make in Next.js that are truly slowing your apps.
We won't be diving into each one but only "Not utilizing the sizes Prop with the Image component". To watch the rest, you can check out my Youtube video here โ๏ธโ ๐ฟ Our Weekly Snack: Not Utilizing the
|
For optimal performance benefits with Next.js's image component, it's essential to specify the sizes
prop along with fill={true}
property
to ensure the appropriate image size is served based on viewport dimensions.
Failure to do so may result in inefficient image loading, causing larger images to be downloaded unnecessarily. This means you'll download an image 3x the size on a smaller mobile device.
This can easily slow down your app performance.
I've been asked to create a video a deep dive into Caching for a while now so here you go.
Check out the below video on Next.js Caching or master Next.js by taking my completely free Crash Course.
Check it out and subscribe to my channel for more content related to Frontend, Leadership and Career Development. ๐ช
Join 6000+ subscribers reading by weekly personalized Newsletter that helps developers level up their skills through weekly Frontend and Leadership Snacks. You get a deep dive into a Tech topic, Actionable tips to excel in your career and a toolbox!
Hey Reader, ๐จ Ever wanted your website to feel like it came straight out of a Studio Ghibli movie? I just discovered a Ghibli-inspired ShadCN UI theme that brings that dreamy, hand-painted magic to your components โ and itโs absolutely stunning. If you're as obsessed with that aesthetic as I am, you're gonna love this. I also share a Github Repo you can check out too that goes along well with the video. ๐ฟ Weekly Snack: 'server-only' vs 'use server' Next.js has two easily confused directives:...
Hey Reader, Having an AI Code Editor is mandatory in today's world. Last weekend, I was talking to a friend who's a Staff DevOps Lead at a Tech firm. He hadn't tried any of the AI Code Editors yet and said he was hesitantโmostly because he thought editors wouldn't know the Context of his codebase as he does and also they can't keep up with his brain ๐ง , he joked. So, very confidently, I showed him Cursor AI. And to my surprise, Cursor really sucked at remembering context. Plus, it took Cursor...
Hey Reader, A couple years ago, I made a bold move. I left my corporate 9-to-5 to become a Tech Educator. Starting from scratch was challenging, I had limited social proof and only had testimonials from my past colleagues. Existing social proof tools were charging $75/month ($900/year!) and were overly complex plus they stopped improving the product. Thatโs when I decided to build my own solution and Ship my First SaaS called as ProofyBubble. ๐ฉต ProofyBubble shows real-time visitor and...