The developers of Next.js have released version 10 of the framework for creating server-side applications with React. An important innovation is the “lazy” loading function for images on the web, in which HTML elements in the markup with the tag are automatically replaced by next / image .

Accelerated page loading: load images as required When using the next / image component, the browser loads the images in “lazy” mode: This means that it only renders them as needed as soon as users navigate near the location, which requires the image construction. Normally, all images are loaded automatically when a website is set up, which, with the usually high proportion of images in the data volume, causes a lot of unnecessary traffic and uses up resources. According to the blog entry of Next.js, the “lazy” function when loading automatically saves around a third of the amount of image data to be loaded and is intended to accelerate the loading process of websites.

The biggest difference In previous practice, loading should be as required, in which the image layout and optimization – unlike with static generators – only takes effect when the user is called. According to the provider, the dynamic concept therefore always requires the same time to build a website, regardless of whether it contains ten images or ten million images. With the new release of the framework, developers can mark images that Next.js should automatically take into account at the start of the viewport and load in advance. According to the blog entry, the targeted configuration can reduce the data load of the images when loading by half. According to the description, the Next.js image component automatically accesses the width and height of the images specified in the markup and calculates their ratio, which is intended to increase performance for some layouts.

More compact image formats on mobile devices The feature should also bring improvements for the display of website images on mobile devices, as the new component next / image can automatically generate images in smaller sizes through built-in image optimization and convert them, for example, from JPEG to other formats such as WebP, which are inherently a third more compact. The restriction is that the browser used must support this. With the appropriate support from the browser, Next.js should also be able to take future image formats into account during automatic conversion.

Internationalization and other changes A number of other important changes are included in the major release. Next.js supports 10 version 17 of React and automatically activates a new JSX transformation mode. To support the new release of the JavaScript library, it is sufficient to update the Next.js framework used with the command npm install next @ latest react @ latest react-dom @ latest . Next.js 10 extends the analysis tools with continuously recorded metrics from the end devices used, automatically recognizes the language of visited websites and adds the language attributes to the HTML tag. Another focus is on the internationalization of routing, whereby the automatic translation