Recently Next.js released version v10.0.0 which introduced
Since version 10.0.0, Next.js has a built-in Image Component and Automatic Image Optimization.
The Next.js Image Component, next/image, is an extension of the HTML <img> element, evolved for the modern web.
The Automatic Image Optimization allows for resizing, optimizing, and serving images in modern formats like WebP when the browser supports it. This avoids shipping large images to devices with a smaller viewport. It also allows Next.js to automatically adopt future image formats and serve them to browsers that support those formats.
So the TLDR; is it does a lot of internal image optimization for you so you don't have to implement your own solutions for them manually. The component supports different
layout values that define how your image size behaves according to the current viewport or surrounding element. Besides passing a
layout prop they require you to always pass the desired
This is perfectly fine if you're using local images that you know the dimensions of. But things quickly become annoying when you try including images from external sources like eg. Twitter. Neither of the current implementations was doing the magic I was promised and still required weird logic to make things work.
This wrapped implementation will determine the
width for you on image load so you don't have to worry about any of this anymore. The default
layout is set to
responsive which will scale both up and down. Just pass your
@segersniels/image and watch things just work.
View below example using it as a renderer provided to