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, I’ve been heads-down the last few months, building something special 🤫. It’s for every developer who’s ever felt like Next.js changes faster than they can keep up. Different caching rules. New folders. New ways to fetch data. If that sounds familiar… this one’s for you. Next week, I’m dropping something big, something that’ll help you finally understand how all the new pieces in Next.js 16 fit together. No hype, no fluff - just the clarity you’ve been looking for. Make sure you...
Hey Reader, I had the incredible opportunity to speak at the official Next.js Conf!. It’s been 2.5 years since I went full-time as a Tech Educator, and this moment truly feels like a milestone. In my talk, I share how I built a custom course platform using Next.js (the same one that powers Modern Full Stack Next.js Course) along with the lessons and challenges I faced along the way. If you'd like, you can watch the talk here! Weekly Snack: Caching Patterns for Dynamic Components in Next.js 🍿...
Hey Reader, I’ve been diving deep into React 19.2 and Next.js 16 Beta this week, and honestly, it’s such a solid update. I have started to incorporate so many of the features in my Next.js Custom Course Platform and have seen massive improvements. But before we jump into this week’s snack, let’s hear it from our sponsor. 👇 But before that, let's hear it from our Sponsor. PRESENTED BY CODERABBIT AI Most AI test tools just throw random assertions at your code and call it “coverage.” But they...