Esse repositório é uma tradução do exemplo do componente Image do Next.js

Componente Image - Projeto Exemplo

Esse exemplo mostra como utilizar o componente Image do Next.js servindo imagens otimizadas e responsivas.

A página principal (pages/index.js) possui algumas imagens, uma imagem interna e outra externa. No arquivo next.config.js, a propriedade domains é usada para habilitar imagens externas. As outras páginas demonstram os layouts diferentes. Execute ou faça deploy da aplicação para entender como isso funciona!

Live demo

https://image-component.nextjs.gallery/

Faça o seu próprio deploy

Faça deploy do exemplo oficial em Vercel ou veja uma prévia em StackBlitz

Como utilizar

Execute create-next-app com npm, Yarn, ou pnpm para inicializar o exemplo:

npx create-next-app --example image-component imagem-app
# or
yarn create next-app --example image-component imagem-app
# or
pnpm create next-app --example image-component imagem-app

Faça deploy para a nuvem com Vercel (Documentação).