Join 9200+ 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!
Avoid these Painful Mistakes Slowing your Next.js apps
|
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.
Weekly Youtube Videos ๐
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. ๐ช
Frontend News & Developers Toolbox ๐งฐ
- A compiler for React called React Unforget โ๏ธ that optimizes components and hooks for performance and readability.
โ - Do you like ESLint, but for performance? Million Lint โ๏ธ is a VSCode extension that keeps your React website fast. They identify slow code and provide suggestions to fix it.
โ - Vercel has a new SDK for AI 3.0 โ๏ธ, a generative UI design tool that converts text and image prompts to React UIs and streamlines the design engineering process.
Ankita Kulkarni
Join 9200+ 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, The biggest challenge with AI right now isn't building from scratch or brainstorming, it's great at both. It's building real intuition for how things should work. Take how TikTok and YouTube handle video. If they served the same file to every device, tablet, mobile, desktop, even a slow 3G connection, users would drop off fast. So how would you solve that? Don't worry, let me show you. Here's how to architect for exactly this challenge. PRESENTED BY IMAGEKIT Don't throw raw MP4s...
Hey Reader, Confession: i've lost count of how many times an agent has killed my running dev server and started a new one on a different port. it's the single most annoying thing about coding with AI right now. Turns out Next.js 16.2 just fixed it so dig into the snack below. let's dig in ๐ฟ PRESENTED BY SUPABASE Supabase is the backend for your app: it gives you a database plus the โboring but necessaryโ stuff around it (user sign-in, file storage, background functions, and real-time updates)...
Hey Reader, I'm working on a new course on AI and I know there are a million courses out there but honestly, I'd like to work on something that can help you ship things. However, I need your help. Can you please answer what type of a course on AI would you want me to work on? Click here to reply โ Anyway, let's get into this week's newsletter. PRESENTED BY SUPABASE Supabase is the backend for your app: it gives you a database plus the โboring but necessaryโ stuff around it (user sign-in, file...