{"pageProps":{"title":"Usando NProgress em projetos next.js","description":"Vou ensinar como instalar e configurar o NProgress em projetos next.js.","thumbnailUrl":"https://blogdomat.vercel.app/api/thumbnail.png?title=Usando NProgress em projetos next.js&icon=https://cdn.worldvectorlogo.com/logos/logo-javascript.svg","slug":"4-usando-nprogress-em-projetos-next-js","content":"<h2 id=\"o-que-é-nprogress\">O que é NProgress?</h2>\n<p>O <em>NProgress</em> é uma barra que mostra ao usuário o carregamento de uma página apartir do clique em um link, olhe a imagem a seguir:</p>\n<p><img src=\"https://api.devbsb.com.br/files/2b8efaeb9385822a5f7ed95535944ed8-nprogress.png\" alt=\"image\"></p>\n<h2 id=\"como-instalar\">Como instalar?</h2>\n<p>Para instalar você precisa adicionar o NProgress ao projeto com yarn ou npm:</p>\n<pre><code>yarn add nprogress\n\nnpm install --save nprogress</code></pre>\n<p>Após a instalação você vai acessar o link para <a href=\"https://unpkg.com/nprogress@0.2.0/nprogress.css\">baixar o css</a> do NProgress,\nvocê deverá salvar o arquivo css dentro da pasta <em>public/</em>, ficando assim <em>public/nprogress.css</em>, faremos referencia a esse arquivo depois.</p>\n<p>Agora abra o arquivo <em>pages/_app.tsx</em>:</p>\n<pre><code># Faça a importação do next/router e do NProgress\nimport Router from &#39;next/router&#39;\nimport NProgress from &#39;nprogress&#39;\n\n# Import também o next/head, você vai precisar dele\nimport Head from &#39;next/head&#39;\n\n# Esses são os eventos disparados quando o usuário muda de página\nRouter.events.on(&#39;routeChangeStart&#39;, () =&gt; NProgress.start())\nRouter.events.on(&#39;routeChangeComplete&#39;, () =&gt; NProgress.done())\nRouter.events.on(&#39;routeChangeError&#39;, () =&gt; NProgress.done())\n\n# Por último, dentro do return da função,\n# faça a importação do css do NProgress\n[...]\nreturn (\n  &lt;&gt;\n    &lt;Head&gt;\n      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/nprogress.css&quot; /&gt;\n    &lt;/Head&gt;\n[...]</code></pre>\n<p>Prontinho, o <em>NProgress</em> já está configurado e pronto para ser usado no seu projeto Next.js.</p>\n<p>Veja como ficará o arquivo <em>_app</em>:</p>\n<pre><code>import React from &#39;react&#39;\nimport Head from &#39;next/head&#39;\nimport { AppProps } from &#39;next/app&#39;\nimport Router from &#39;next/router&#39;\nimport NProgress from &#39;nprogress&#39;\n\nRouter.events.on(&#39;routeChangeStart&#39;, () =&gt; NProgress.start())\nRouter.events.on(&#39;routeChangeComplete&#39;, () =&gt; NProgress.done())\nRouter.events.on(&#39;routeChangeError&#39;, () =&gt; NProgress.done())\n\nconst MyApp: React.FC&lt;AppProps&gt; = ({ Component, pageProps }) =&gt; {\n  return (\n    &lt;&gt;\n      &lt;Head&gt;\n        &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/nprogress.css&quot; /&gt;\n      &lt;/Head&gt;\n\n      &lt;Component {...pageProps} /&gt;\n    &lt;/&gt;\n  )\n}\n\nexport default MyApp</code></pre>\n<h2 id=\"alterando-a-cor-da-barra-💥\">Alterando a cor da barra 💥</h2>\n<p>Acesse o arquivo anteriormente salvo dentro da pasta <em>public/nprogress.css</em>.</p>\n<pre><code>[...]\n#nprogress .bar {\n  background: #29d;\n[...]</code></pre>\n<p>Altere todas as cores em hexadecimal (#29d) do arquivo, para de sua escolha, por exemplo: (#f0f)</p>\n<pre><code>[...]\n#nprogress .bar {\n  background: #f0f;\n[...]</code></pre>\n<p>Até mais!</p>\n"},"__N_SSG":true}