Next Image, with Extra Stuff.
Next/Image has become quite powerful over the past few years.
For props, it accepts all the attributes of your typical img tag, in addition to some very useful custom props such as layout, priority, onLoad and blurDataUrl.
We highly recommend referencing their documentation regularly for more up to date information.
Because we upload our images to Sanity and fetch them from the CDN, we don't necessarily know the height and width of the image coming in.
To get around this, we wrap our Next Image in a relatively-positioned figure element, so we can leverage the layout='fill' property.
There is a type prop that we can use to alter the figure wrapper that accepts one of two values: static or fluid.
Static - the default value. We use the padding-bottom hack to prevent any layout shifts when the image is first loaded.
Fluid - this will make the figure element absolutely positioned.
In either case, we don't have to worry about modifying the actual image - it's filling whatever container we have!