Rotas de Erros 404 (não encontrado)

O que acontece quando você abrir no navegador uma rota /nao-existente?

O Next.js automaticamente consegue lidar com rotas não encontradas e exibir uma página 404 padrão. No entanto, você pode - e deve! - personalizar essa experiência para melhor se adequar ao seu aplicativo.

Página 404 Padrão

Por padrão, o Next.js exibirá uma página 404 genérica para qualquer rota que não exista em seu aplicativo. Esta página é gerada automaticamente e não requer nenhuma configuração adicional:

não encontrado

Personalizando a Página 404

Para criar uma página 404 personalizada, você pode adicionar um arquivo not-found.tsx na raiz do diretório app/. Este arquivo será usado para todas as rotas não encontradas em seu aplicativo.

Vamos criar um exemplo simples para nossa aplicação:

export default function NotFound() {
  return (
    <div>
      <h2>Nada encontrado aqui...</h2>
      <p>Não foi possível encontrar o recurso solicitado</p>
      <a href="/">Voltar para Home</a>
    </div>
  )
}

Adicionando uma ilustração

Que tal deixarmos tudo um pouco mais bonito colocando uma ilustração legal? Este website de ilustrações 404 provavelmente vai ter alguma imagem que irá agradar.

Vamos adicionar uma imagem de um barquinho furado.

alt text

export default function NotFound() {
  return (
    <div>
      <h2>Nada encontrado aqui...</h2>
      <img src="/boat.png" alt="ilustração de um barco" />
      <p>Não foi possível encontrar o recurso solicitado</p>
      <a href="/">Voltar para Home</a>
    </div>
  )
}

Por enquanto está tudo muito feio. Mas não se assuste, vamos melhorar tudo daqui a pouco quando falarmos sobre estilização.