SVGs estão por toda parte — ícones, logotipos, ilustrações animadas e até mesmo em detalhes sutis de UI. Integrá-los em um projeto moderno do Next.js (v14+) pode não ser tão simples. Este guia oferece orientações atualizadas para 2025 sobre os métodos mais comuns de SVG, com exemplos novos e ajuda específica para usuários de App Router e TypeScript.

Este guia descomplica a confusão com orientações sobre os quatro métodos mais comuns de SVG. Quer você esteja desenvolvendo um sistema de design ou apenas tentando evitar uma “imagem quebrada” em produção, temos a solução.

Início rápido: Importando SVGs no Next.js

Precisa renderizar um SVG agora? Aqui está um resumo dos métodos mais comuns:

Uso	Método	Exemplo de código
Componentes SVG Inline	SVGR	import Icon from './icon.svg'
Imagens decorativas estáticas	Pasta /public +
Imagens otimizadas (incl. SVG)	Next.js
Markup SVG Inline Customizado	Colar SVG JSX inline	JSX direto dentro do seu componente

Por que SVGs?

Os SVGs são um dos formatos de imagem mais populares na web hoje. Em contraste com as imagens rasterizadas, as imagens vetoriais oferecem vários benefícios:

• Leve — Gráficos vetoriais ocupam menos espaço e memória em comparação com imagens bitmap
• Animáveis — Anime-os com CSS moderno ou JavaScript
• Escaláveis — São independentes de resolução, então se ajustam bem a todas as telas
• Acessíveis — Os SVGs são baseados em XML, permitindo incorporar texto e funções ARIA diretamente
• Amigáveis para SEO — Motores de busca podem rastrear e indexar o markup de SVGs

Com esses benefícios, é essencial saber como adicioná-los aos seus projetos.

Como importar SVGs no Next.js

A Vercel, empresa por trás do Next.js, oferece uma plataforma completa e um conjunto de pacotes de software dentro de seu ecossistema para você construir e hospedar aplicativos full-stack usando Next.js. Para qualquer problema que você encontrar ao usar o Next.js, quase sempre encontrará uma solução dentro do ecossistema do Next.js.

Os projetos padrão do Next.js vêm com um componente next/image embutido para trabalhar com imagens. Você pode usar o componente next/image para imagens bitmap e vetoriais. Portanto, ao usar SVGs ou outros formatos de imagem em um aplicativo Next.js, o componente next/image embutido será quase sempre sua primeira escolha.

SVG Inline em JSX

Incorporar um SVG diretamente no seu JSX oferece controle máximo. Você pode estilizar partes individuais, aplicar animações e até vincular interatividade.

Primeiro, converta o SVG bruto para o formato JSX. Ferramentas como o SVGR facilitam isso, convertendo o SVG para a sintaxe JSX e encapsulando-o em um componente funcional do React.

Conclusão

Espero que este artigo tenha ajudado a esclarecer as diferentes maneiras de importar e usar SVGs e imagens em aplicativos Next.js. O componente embutido next/image oferece uma solução poderosa e otimizada para a maioria dos casos de uso.

Se o seu projeto tiver necessidades mais específicas, os pacotes de terceiros que abordamos podem oferecer flexibilidade adicional — mas certifique-se de avaliar seu status de manutenção, segurança e licenças antes de integrá-los.