O Next.JS é um framework baseado na biblioteca de desenvolvimento React e é uma tecnologia que está se destacando no mercado nos últimos tempos.
Podemos atribuir este destaque ao fato do framework permitir que você desenvolva aplicações usando seus conhecimentos de React, o que por si só, já é bem popular. E ainda adiciona novas funcionalidades e facilidades ao desenvolvimento.
Entre as features do Next.JS, também 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, bem como, as otimizações que a aplicação sofre em ambiente de produção. Isso tudo deixa a aplicação muito mais performática, e, por isso, neste artigo vamos utilizar este framework para criar uma página de 404 em uma aplicação.
Criando um projeto
Primeiramente, para criar um projeto em Next.JS você vai precisar rodar o comando npx create-next-app projeto
Uma vez que você tenha criado o projeto, vai se deparar com uma estrutura de pastas como esta:
Em seguida, você pode usar o comando npm run dev, e assim 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.
Esse erro indica que a página que você está tentando acessar não foi encontrada na aplicação.
Por isso, ao tentar acessar a URL localhost:3000/teste na nossa aplicação (que é uma página inexistente), recebemos por padrão a página abaixo:
Enfim, para personalizar esta página, vamos criar dentro da pasta pages um arquivo chamado 404.
Esse arquivo pode ter a extensão jsx ou tsx, dependendo de qual linguagem você está usando na aplicação. E dentro desse arquivo, você vai colocar o código que representa a sua página personalizada.
Primeiramente, vou inserir uma mensagem personalizada e uma imagem que represente esse tipo de erro que tirei do site https://storyset.com/404.
Eu salvei a imagem na pasta public do meu projeto e a utilizei no arquivo 404.jsx fazendo algumas modificações. O código ficou assim:
Então, a página de 404 ficou assim:
Assim, é possível vermos que a URL na parte superior da página ainda é a mesma e que corresponde a uma página que não existe na aplicação.
Conclusões
Portanto, podemos perceber como criar uma página de 404 em uma aplicação Next.JS é algo bem simples. Especialmente se considerarmos que essa página tem a mesma estrutura de uma página normal do framework.
Além de páginas de 404, o Next.JS também proporciona o mesmo tipo de página para erros do tipo 500 (erros internos do servidor).
Neste caso, basta chamar o arquivo de 500.jsx.
Bons estudos!
