Esse é um tutorial que funciona no NextJS (v14.0.3)

Como sempre quem é do front-end tem a incrível missão de brigar diariamente com a responsividade das imagens e um dos grandes problemas é deixá-la com a proporção original (nem muito esticada e tão pouco muito amassada).

A vantagem do NextJS é ter uma otimização da imagem sem "estragar" a beleza da mesma, por isso é muito comum utilizarmos o componente <Image /> que possui algumas propriedades:

1
import Image from "next/image";
2
import profilePic from "../public/me.png";
3

4
export default function Page() {
5
  return (
6
    <Image
7
      src={profilePic}
8
      alt="Picture of the author"
9
      // width={500} automatically provided
10
      // height={500} automatically provided
11
      // blurDataURL="data:..." automatically provided
12
      // placeholder="blur" // Optional blur-up while loading
13
    />
14
  );
15
}

Principais características do componente Image:
• 📌 src: especifica o caminho da imagem a ser exibida. No exemplo, a variável profilePic é usada para fornecer o caminho da imagem.
• 📌 alt: define o texto alternativo que será exibido caso a imagem não possa ser carregada.
• 📌 width e height: são fornecidos automaticamente e definem as dimensões da imagem. No exemplo, o valor 500 é usado para ambos.
• 📌 blurDataURL: fornece uma URL de dados embaçados para ser exibida enquanto a imagem é carregada. Essa propriedade é fornecida automaticamente..
• 📌 placeholder: define o estilo de desfoque que será exibido enquanto a imagem é carregada. Neste exemplo, a opção blur é usada.

Agora vamos ao que interessa, para deixar a imagem sempre responsiva e com o tamanho correto, basta adicionar a propriedade sizes="100vw" e também um estilo inline style com o width: '100%' e height: 'auto' igual ao código a seguir:

1
import Image from "next/image";
2
import profilePic from "./me.png";
3

4
export default function Page() {
5
  return (
6
    <Image
7
      // Importação de uma imagem
8
      // Define automaticamente a largura e altura
9
      src={profilePic}
10
      sizes="100vw"
11
      // Faça com que a imagem seja exibida em largura total
12
      style={{
13
        width: "100%",
14
        height: "auto",
15
      }}
16
    />
17
  );
18
}

Se de repente a imagem é grande demais ou então não tem os lados, alturas iguais e você queira modificá-la para deixar responsiva, é só mudar as especificações no style deixando o width: 'auto' e modificando a altura (height)