Next.js serve arquivos estáticos (imagens, fontes, ícones, PDFs, robots.txt) a partir da pasta especial public/ na raiz do seu projeto.
public/
logo.png → served at /logo.png
favicon.ico → served at /favicon.ico
docs/guide.pdf → served at /docs/guide.pdf
robots.txt → served at /robots.txt
Um arquivo em está disponível na URL — a parte é descartada. Referencie-os com um caminho absoluto a partir da raiz:
public/logo.png/logo.pngpublic/import Image from "next/image";
export default function Header() {
return (
<>
<Image src="/logo.png" alt="Logo" width={120} height={40} />
<img src="/icons/star.svg" alt="" />
<a href="/docs/guide.pdf">Download guide</a>
</>
);
}
// Option A: from public/ — referenced by URL string
<Image src="/logo.png" width={120} height={40} alt="" />
// Option B: imported — bundled, hashed for caching, dimensions inferred
import logo from "./logo.png";
<Image src={logo} alt="" /> // width/height come from the import automatically
Imagens importadas recebem um nome de arquivo com hash de conteúdo (ótimo para cache de longo prazo) e Next.js pode inferir suas dimensões. Use public/ para arquivos referenciados por URL estável (favicon, robots.txt, og-images, downloads) e imports para imagens usadas diretamente em componentes.
public/ não é um destino de upload em tempo de execução.public/ é publicamente acessível por URL.A pasta public/ é a maneira simples e baseada em convenção para servir arquivos estáticos no Next.js (favicons, robots.txt, imagens OG, downloads).
Saber que seu conteúdo mapeia para a raiz da URL — e quando preferir importar um ativo (com hash, cacheável, auto-dimensionado) versus referenciá-lo de public/ — cobre as necessidades cotidianas de ativos estáticos.