Como importar SVGs no Next.js: Guia 2025
Aprenda a importar SVGs em apps Next.js com métodos atualizados para 2025, incluindo dicas para App Router e TypeScript.
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.
