Some tips on how to make your Next.js application have a better performance and a better UX

Roberto Umbelino

Figma

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

Learn how to optimize performance on your Next.js app with tips like loading only the necessary JavaScript and CSS, lazy loading dependencies, using the Next.js Image component for image optimization, preferring CSS over JavaScript, avoiding loaders at the beginning, utilizing font optimization, optimizing scripts, removing unused packages, checking bundle size, and using server components for improved rendering and caching.

Get the Best Performance on Your Next.js App

1. Load only the JavaScript and CSS you need.

3. Use the <Image /> component from Next.js

5. Avoid showing a loader at the beginning

+1 for <code>depcheck</code> package ✨
<a href="https://www.npmjs.com/package/depcheck" target="_blank" rel="noopener nofollow">https://www.npmjs.com/package/depcheck</a>

It was a good read!
I would say, as a rule of thumb, you should always Load only the JavaScript and CSS you need, regardless of the technology you are using!
Cheers! ✌️

Next js is a optimized framework to deliver faster and more robust applications
Performance is in very critical in that process.
Thanks for the article ✨

These tips are truly great. Some of these practices should be implemented right from the start of the application development, but of course, it all depends on the context of the application.

It honestly baffles me how JS has a number of huge frameworks that feel and are extremely powerful compared to basically every other language out there .-.