Next-progress NPM

next-progress

No hassle Next.js - NProgress integration

Fully configurable & easy to use

🚀 Demo

🔌 Setup

it's so quick

✅ Install

yarn add next-progress

npm install --save next-progress

✅ Import

Important❗️ It has to be done in your custom App - pages/_app[.js / .jsx / .ts / .tsx]

import NextProgress from "next-progress";

✅ Use

Anywhere in your custom App's return statement

<NextProgress />

🌟 Example pages\_app

Tip: This example is in typescript, if you use javascript then just remove the types.

import type { AppProps } from "next/app";
import Head from "next/head";
import NextProgress from "next-progress";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="theme-color" content="#000000" />
        <meta name="description" content="Lorem Ipsum..." />
        <title>Example</title>
      </Head>
      {
        //
        // Can be placed anywhere in the return statement
        //
      }
      <NextProgress delay={300} options={{ showSpinner: false }} />
      {
        //
        //
        //
      }
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </>
  );
}