Melhore a experiência do usuário e o SEO do seu site com uma página de loading eficiente
Você está procurando uma maneira de melhorar a velocidade de carregamento do seu site? Com a nova atualização do Next.js 13, agora é possível criar uma página de loading para tornar seu site mais rápido e agradável para os usuários. Neste tutorial, vamos mostrar como criar uma página de loading eficiente com a nova atualização do Next.js 13.
Por que criar uma página de loading?
Mantenha os usuários engajados e melhore o tempo de carregamento do seu site
Uma página de loading é uma excelente maneira de melhorar a experiência do usuário do seu site, tornando-o mais rápido e fácil de navegar. Quando um usuário visita seu site, ele pode ficar frustrado se a página demorar muito para carregar. Uma página de loading ajuda a manter o usuário engajado enquanto os recursos do site são carregados, melhorando assim a experiência do usuário.
Além disso, o tempo de carregamento é um fator importante para o ranking do seu site nos resultados de pesquisa do Google. O Google valoriza sites que carregam rapidamente, pois eles oferecem uma experiência melhor para os usuários.
Passos para criar uma página de loading com o Next.js 13
Siga estes passos simples para criar sua própria página de loading
Agora vamos mostrar como criar uma página de loading com a nova atualização do Next.js 13. Siga estes passos simples:
Passo 1: Crie um projeto em next.js("é importante que esteja utilizando uma versão do Next.js 13 ou superior e utilizarmos o nova maneira de usar diretório)
Passo 2: Crie no diretório app uma pasta chamada teste e dentro desta pasta vamos criar um arquivo chamado page.tsx e nele vamos adicionar o seguinte código:
Aqui nós criamos uma página chamada teste, seria uma página simples, apenas para que nós possamos testar a página de loading, Adicionamos um paragrafo com o texto “página teste”, assim conseguimos identificar qual página nós estamos, e também adicionamos um Link para que possamos voltar para a página início.
Passo 3:Vamos personalizar nossa página início, aquela que já vem no diretório raiz do projeto, para que possamos reconhecer quando sairmos de uma página para a outra, o código deve ficar assim:
Nada muito diferente da página teste, apenas criamos um titulo para identificar a página, e depois um link que leva para a página teste, para que possamos ir da página principal para a página teste, e da teste para a principal, assim podemos testar muitas vezes.
Passo 4: Agora vem o PULO DO GATO, no diretório app vamos criar um arquivo chamado loading.tsx e nele vamos personalizar a página de loading da maneira que nós quisermos, a minha ficou assim:
Com nossa página pronta, e os diretórios todos certos, podemos testas, mas antes disso, devemos lembrar que nosso projeto está rodando em localhost, e isso é um pequeno problema para testarmos uma página de carregamento, pois é praticamente instantâneo o carregamento, mas existe uma pequena solução para isso que devemos fazer antes de testar.
Passo 5: Testando a página em localhost:
Com o navegador aberto(estou utilizando Google Chrome), aperte o botão f12, clique em rede e terá um campo que provavelmente esteja em sem limitação vamos clicar e colocar para conexão 3G LENTA, pronto, agora só clicarmos no link que leva para a página de teste, e se tiver feito tudo certo como explicado no tutorial, você verá a página de loading.
Conclusão
Com a nova atualização do Next.js 13, agora é mais fácil do que nunca criar uma página de loading eficiente para melhorar a experiência do usuário do seu site e melhorar o SEO. Siga estes passos simples e adicione uma animação de loading atraente para manter seus usuários engajados enquanto o site carrega. Com uma página de loading bem feita, você pode melhorar o tempo de carregamento do seu site e obter um melhor posicionamento nos resultados de pesquisa do Google.
mudanças no Next.js 13
Caso tenha ficado alguma dúvida, temos um vídeo no nosso canal onde realizamos o mesmo tutorial, assista para reforçar o tutorial
