I was doing a quick update on a NextJS project and found that the layout="responsive" prop was deprecated in version 13. I’ve found that sometimes NextJS doesn’t have good docs for upgrading and this was no exception.

Before

<Image
  src="/image-link.jpeg"
  alt="Image description"
  width={1190}
  height={577}
  layout="responsive"
/>

With this one gets a warning Image with src "/image-link.jpeg" has legacy prop "layout".. The link to docs doesn’t specify what to do with layout="responsive", though.

TL;DR: I’ve found style={{ width: '100%', height: 'auto' }} to be a good replacement for layout="responsive".

After


<Image
  src="/image-link.jpeg"
  alt="Image description"
  width={1190}
  height={577}
  style={{ width: "100%", height: "auto" }}
/>