Você está tentando fazer o build do seu site Next.js como páginas estáticas, mas está tendo problemas com imagens? Então essa dica é pra você!

Passo 1: Configure o Next.js para gerar HTML estático no build

No seu arquivo next.config.ts (ou next.config.js), adicione a diretiva abaixo:

import type {NextConfig} from "next";

const nextConfig: NextConfig = {
  output: "export",
};

export default nextConfig;

Passo 2: Rode o comando padrão do Next.js para build

Isso irá gerar uma pasta out na raiz do seu projeto

npm run build

Passo 3: Rode o comando para servir os arquivos estáticos localmente

npx serve@latest out

Obs: Isso irá instalar o pacote server globalmente na sua máquina

⚠️ Atenção com as imagens!

Ao servir os arquivos estáticos localmente, você irá perceber que as imagens podem não estar aparecendo isso ocorre quando você usa o componente <Image /> do Next.js, pois ele depende da rota especial /_next/image para otimizar e servir as imagens, o que não funciona no modo estático.

Resultado: ao abrir o site estático, suas imagens podem não aparecer, dando erro 404.

🔑 A solução simples

Substitua o <Image /> por tags <img /> padrão:

// TROQUE
import Image from "next/image";

<Image src="/logo.png" width={200} height={100} alt="Logo" />;

// POR
<img src="/logo.png" width={200} height={100} alt="Logo" />;

Após isso gere o build novamente

---

Imagem "Not found" de Draguth Leon por Pixabay