NextProgress

O Nprogress(vamos chamar dessa maneira carinhosa rs) é uma lib que nos fornece um loader para as navegações dentro da noça aplicação Next de uma forma muito simples. "Aaah mas eu vou ter que configurar milhares de coisas e instalar outras libs complementares", nada disso meu favo de mel, vamos ver como funcionar na prática.

Vamos começar criando o nosso projeto Nextjs

Agora já com o projeto criado, temos uma home bem simples com um link para nos levar para a página contato.

Com a página home e a página produtos criadas, já temos uma navegação entres as nossas rotas. Até então tudo ok, mas ainda não temos uma sinalização de que essa mudança está sendo feita, vamos supor que nossa página pra renderizar precisa da resposta de uma requisição API que leva um tempo considerável, não é nada agrádavel para o usuário esperar esse tempo sem ao menos te uma sinalização. É ai onde o nosso Nprogress vai entrar em ação!

A instalação dele é bem simples :

$ npm install --save next-progress

Com ele já instalado na sua máquina vamos colocar a mão na massa!

E realmente é muito simples, vamos importar ele no nosso arquivo app com o seguinte código:

$ import NextProgress from "next-progress";

basta inserir ele no documento para começarmos a utilizar em toda a nossa aplicação!

E agora já temos nosso loader totalmente funcional!!!

Você vai poder configurar a barra de progresso no próprio elemento, você ver mais sobre isso nessa documentação .

Minha personalização foi a seguinte:

<NextProgress color="#21c537" height= "6px" options={{showSpinner: false}} />

E eu obtive este resultado:

Apesar de ser uma biblioteca bem simples, ela melhora consideravelmente a experiênciado usuário. Ela realmente me agradou bastante e prentendo utilza-lá em muitos projetos. E você, o que achou?