Do you want to get 100 percent performance on your website with Next.js?
Here is a collection of tricks to get it.

I am looking for a part time job, if you are interested in working with me contact me!

1. Load only the JavaScript and CSS you need.

To find out if this is a problem, you can use the Coverage tab in the DevTools.

This tab is a bit hidden, but it tells you the % usage of your files.

When you click on a file, it shows you the lines that are used:

2. Lazy Loading of dependencies

Use dynamic imports to load components and libraries only when you don’t need them instantly.

By using next/dynamic, the header component will not be included in the page's initial JavaScript bundle. The page will render the Suspense fallback first, followed by the Header component when the Suspense boundary is resolved.

An example of dynamic component import with JavaScript code:

import dynamic from 'next/dynamic'
 
const DynamicHeader = dynamic(() => import('../components/header'), {
  loading: () => <p>Loading...</p>,
})
 
export default function Home() {
  return <DynamicHeader />
}

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

The Next.js Image component extends the HTML <img> element with features for automatic image optimization:

4. Prefer CSS over JavaScript

CSS has improved a lot and is becoming more and more powerful.

Nowadays you can make certain sliders and UIs without JS.

Check and learn how to use CSS because: