Texto de: Letícia Garcez
Introdução
Next.js é um framework baseado na biblioteca de desenvolvimento React e é uma tecnologia que está se destacando no mercado nos últimos tempos. Esse destaque pode ser atribuído ao fato do framework permitir que você desenvolva aplicações usando seus conhecimentos de React que por si só já é bem popular, mas adicionando novas funcionalidades e facilidades ao desenvolvimento.
Entre as funcionalidades providas pelo Next.js, podemos citar a facilidade para a manipulação de rotas, a possibilidade de renderizar a sua aplicação de maneira estática do lado do servidor e é claro as otimizações que a aplicação sofre em ambiente de produção, o que a deixa muito mais performática, e neste artigo vamos utilizar este framework para criar uma página de 404 em uma aplicação utilizando a versão 14 do framework.
Criando um projeto
Para criar um projeto em Next.js você vai precisar rodar os comando npx create-next-app projeto
Uma vez que você tenha criado o projeto, você vai se deparar com uma estrutura de pastas como esta:
Depois disso, você pode usar o comando npm run dev, e com isso você terá o projeto padrão do Next.js rodando na porta 3000 da sua aplicação.
Criando a página 404
Uma das páginas de erro mais comuns em aplicações web é a página de erro 404, que indica que a página que você está tentando acessar não foi encontrada na aplicação. Ao tentar acessar o URL localhost:3000/teste na nossa aplicação (que é uma página inexistente), recebemos por padrão a página abaixo:
Agora para personalizar esta página, vamos criar dentro da pasta app um arquivo chamado not-found, que pode ter a extensão jsx ou tsx dependendo de qual linguagem você está usando na aplicação. Dentro desse arquivo você deve colocar o código que representa a sua página de erro 404 personalizada. Um exemplo de código que pode ser usado, pode ser visto abaixo:
export default function () {
return (
<div className="flex items-center justify-center h-screen">
<div className="text-center">
<h1 className="text-4xl font-bold mb-4">404 - Página não encontrada</h1>
<p className="text-gray-400">A página que você está procurando não existe.</p>
</div>
</div>
);
}
Ao acessar a mesma URL inexistente no navegador agora temos a seguinte página:
Considerações finais
Criar uma página de erro 404 em uma aplicação Next.js é algo bem simples, mas que deixa a sua aplicação muito mais profissional e melhora a experiência do usuário.
