A couple of the huge features that were released and have made it on to our radar, the first being next/script.

We have all been there you have to integrate a 3rd party script be it a tracking pixel, an element that shows up on the page or just a chatbot. This new feature of nextjs 11 allows you to plan a better strategy for not only loading, but handling errors.

How to use next/script to handle errors.

1
2
3
4
5
<Script
    src={url}
    strategy="beforeInteractive"
    onError={() => alert('Script was unable to load')}
  />

We can also use the strategy prop to change when a 3rd party loads to increase performance like below.

1
2
3
4
<Script
    src={url}
    strategy="lazyOnload"
  />

The strategy "lazyOnload" would wait for some idle time as the page renders, making it the most performant. Maybe you have a critical script like an APM for your frontend, in that case you would want to use "beforeInteractive" as the strategy, this is run before the page is interactive.

The strategy "afterInteractive" is good for analytics once the page becomes interactive, then this script is loaded.

Now supports blur-up placeholders for the image on load, this helps with the core web vital, CLS (Cumulative Layout Shift ). Once you load the full image, it then replaces the blur image. This improves load time and CLS, while using a small hash to represent the image for loading purposes.

If you made it to the end, you get to know that this site is currently on nextjs 11. We were able to upgrade pretty easily, we have to also update a number of packages that we use to extend our nextjs. Including typescript to the latest. It was pretty simple and easy to do. We suggest all go ahead and upgrade!