Lidando com imagens no Next.js

A partir da versão 10.0 do Next.js, ele vai contar com suporte oficial para lidar diretamente com imagens, esta sem dúvida era uma das funcionalidades mais pedida pela comunidade, agora que ela já está disponível para uso, vamos entender como ela funciona.

Para este artigo, vou considerar que você já tenha um App Web com Next.js v10.0+, rodando em sua máquina, qualquer dúvida você pode seguir a documentação oficial do Next.js.

Como funciona

Se você por um desenvolvedor Next, já deve estar familiarizado com a recomendação da biblioteca para salvar as imagens na pasta public, o componente de imagens do Next funciona praticamente da mesma forma, para que ele tenha um bom funcionamento, as imagens ainda deve ser mantida no diretório recomendado.

Usando componente de imagem

Para facilitar a usabilidade e a otimização de imagens, o Next desenvolveu um componente padrão do React. E este componente pode ser importado de dentro do próprio Next, veja o exemplo.

// src/pages/Home
import React from 'react'
import Image from 'next/image'

const Home = () => {
 return (
   <>
     <Image
       src="./my-image.png"
       alt="My Image"
       width={300}
       height={300}
     />
   </>
 )
}

export default Home

Podemos notar aqui em importação do componente é bem simples, e ele é composto por até três propriedades obrigatórias, src, width, height.

No exemplo acima, acabamos de informar ao componente, que ele vai ter uma imagem com largura e altura de 300px, dessa forma, o componente evita que a imagem tenha um tamanho superior a 300px.

Se por algum motivo você não queira que a imagem tenha um tamanho fixo, podemos passar a propriedade unsized={true} para o componente, dessa forma a imagem não vai seguir a regra dos valores fixos, e vai passar até o seu tamanho original.

<Image
 src="./my-image.png"
 unsized={true}
/>

Imagens de domínios externos

Também é possível otimizar imagens hospedados em sites externos, para que isso seja possível primeiro devemos habilitar o endereço padrão das imagens, crie o arquivo next.config.js na raiz do projeto, em seguida adicione as configurações.

// next.config.js
module.exports = {
 images: {
   domains: ['i.imgur.com'],
 },
}

Note que o domínio não pode conter HTTP ou HTTPS no endereço, exceto em casos em que for usar provedores de nuvem para otimizar as imagens.

Para saber mais sobre provedores de nuvem para otimização de imagens, veja a documentação oficial.

<Image
 src='https://i.imgur.com/aUTOLz2.png'
 alt="My Image"
 width={300}
 height={300}
/>

Resolvendo problemas com importação de imagens

Como citado anteriormente, o próprio Next recomenda que os arquivos de imagens, fiquem salvo na pasta public, porém eu não acho que isso seja uma boa prática, e percebo que às vezes os nossos arquivos ficam um pouco desorganizado, para facilitar ainda mais o desenvolvimento, podemos importar imagens de outros diretórios, como ajuda de bibliotecas de terceiros.

Instalando a biblioteca next-images

Primeiro vamos começar instalando a biblioteca next-images.

yarn add next-images

ou

npm install --save next-images

Adicione as configurações da biblioteca no arquivo next.config.js.

// next.config.js
const withImages = require('next-images')
module.exports = withImages({
 esModule: true
})

Caso o seu projeto Next esteja usando TypeScript, acrescente a tipagem da biblioteca no arquivo next-env.d.ts.

/// <reference types="next-images" />

Importando imagens

Depois das configurações realizadas, estamos pronto para importar as imagens, como exemplo, vou usar um pasta chamada assets localizada dentro do diretório src.

// src/pages/Home
import React from 'react'
import Image from 'next/image'

import img from '../assets/my-image.png'

const Home = () => {
 return (
   <>
     <Image
       src={img}
       alt="My Image"
       width={300}
       height={300}
     />
   </>
 )
}

export default Home

Image background com styled-components

Se você estiver usando o styled-components para processar o CSS das páginas, você também terá que fazer uso da biblioteca que instalamos anteriormente next-images, pois da mesma forma que um Next não suporta importações de imagens, o styled-components com Next também não.

// src/styles/pages/Home
import styled from 'styled-components'

import img from '../../assets/my-image.png'

export const Container = styled.div`
 background: url(${img}) no-repeat;
`

Agora que já entendemos como lidar com imagens dentro do Next, podemos colocar o nosso projeto em produção.

Conclusão

Devs, este foi mais um artigo sobre Next.js, meu pretinho do trazer mais conteúdos como este para dentro do blog, porém gostaria muito de saber sobre a opinião de vocês, do quê achou sobre o artigo, o que eu poderia melhorar e o que vocês esperam encontrar aqui dentro.

Eu vou ficando por aqui, não esqueça de deixar um comentário e compartilhar nas redes sociais com seus amigos.