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.

• Not Utilizing the sizes Prop with the Image Component 🎨
• Incorrect Usage of Loading States in Server Actions 🔁
• Misplacement of Redirect Functions in Server Actions ←
• Inadequate Cache Management 📦
• Improper Component Architecture 🌐

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 sizes Prop with the Image Component

Here is a quick code snippet,

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.

Master Next.js Caching in 25 minutes ​

Ultimate Next.js 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.