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>
    </>
  );
}

⚙️ Docs - Options

📐 height

Height of the progress bar.

default = "2px"

🌈 color

Color of the progress bar.

default = "#29D"

🐢 delay

Delay of the animation - when page loads faster than the delay time progress bar won't be displayed.

default = 0

♻️ disableSameRoute

If true, progress bar won't be displayed when user travels the same route they're currently on.

default = false

⚙️ options

Options for - NProgress.configure(options).

See NProgress docs

default = undefined

👠 customGlobalCss

Css Custom NProgress styles - must be provided as a string that will go inside the <style jsx> tag.

Warning: color param won't work as you should set the color yourself inside custom css.