// In app directory
import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';

// In pages directory
import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar';

Use

<ProgressBar />

Exemple with /pages/_app

JavaScript

import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar';

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <ProgressBar
        height="4px"
        color="#fffd00"
        options={{ showSpinner: false }}
        shallowRouting
      />
    </>
  );
}

TypeScript

import type { AppProps } from 'next/app';
import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <ProgressBar
        height="4px"
        color="#fffd00"
        options={{ showSpinner: false }}
        shallowRouting
      />
    </>
  );
}

Exemple with /app/layout

JavaScript

First approach in a use client layout

// In /app/layout.jsx
'use client';

import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <ProgressBar
          height="4px"
          color="#fffd00"
          options={{ showSpinner: false }}
          shallowRouting
        />
      </body>
    </html>
  );
}

Second approach wrap in a use client Providers component

See Next.js documentation

// Create a Providers component to wrap your application with all the components requiring 'use client', such as next-nprogress-bar or your different contexts...
'use client';

import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';

const Providers = ({ children }) => {
  return (
    <>
      {children}
      <ProgressBar
        height="4px"
        color="#fffd00"
        options={{ showSpinner: false }}
        shallowRouting
      />
    </>
  );
};

export default Providers;

// Import and use it in /app/layout.jsx
import Providers from './providers';

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

TypeScript

First approach in a use client layout

// In /app/layout.tsx
'use client';

import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <ProgressBar
          height="4px"
          color="#fffd00"
          options={{ showSpinner: false }}
          shallowRouting
        />
      </body>
    </html>
  );
}

Second approach wrap in a use client Providers component

See Next.js documentation

// Create a Providers component to wrap your application with all the components requiring 'use client', such as next-nprogress-bar or your different contexts...
'use client';

import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';

const Providers = ({ children }: { children: React.ReactNode }) => {
  return (
    <>
      {children}
      <ProgressBar
        height="4px"
        color="#fffd00"
        options={{ showSpinner: false }}
        shallowRouting
      />
    </>
  );
};

export default Providers;

// Import and use it in /app/layout.tsx
import Providers from './providers';

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

Props

height optional - string

Height of the progress bar - by default 2px

color optional - string

Color of the progress bar - by default #0A2FFF

options optional - NProgressOptions

by default undefined

See NProgress docs

shallowRouting optional - boolean

If the progress bar is not displayed when you use shallow routing - by default false

See Next.js docs

delay optional - number

When the page loads faster than the progress bar, it does not display - by default 0

style optional - string

Your custom CSS - by default NProgress CSS

App directory router

Import

import { useRouter } from 'next-nprogress-bar';

Use

Replace your 'next/navigation' routers with this one. It's the same router, but this one supports NProgress.

const router = useRouter();

// With progress bar
router.push('/about');
router.back();

// Without progress bar
router.push(
  '/about',
  {},
  {
    showProgressBar: false,
  },
);
router.back({ showProgressBar: false });

Migrating from v1 to v2

Pages directory

// before (v1)
import ProgressBar from 'next-nprogress-bar';

<ProgressBar
  height="4px"
  color="#fffd00"
  options={{ showSpinner: false }}
  shallowRouting
/>;

// after (v2)
import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar';

<ProgressBar
  height="4px"
  color="#fffd00"
  options={{ showSpinner: false }}
  shallowRouting
/>;

App directory

// before (v1)
import ProgressBar from 'next-nprogress-bar';

<ProgressBar
  height="4px"
  color="#fffd00"
  options={{ showSpinner: false }}
  appDirectory
  shallowRouting
/>;

// after (v2)
import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';

<ProgressBar
  height="4px"
  color="#fffd00"
  options={{ showSpinner: false }}
  shallowRouting
/>;

Issues

Please file an issue for bugs, missing documentation, or unexpected behavior.

File an issue

LICENSE

MIT

Keywords

FAQs

What is next-nprogress-bar?

Is next-nprogress-bar popular?

Is next-nprogress-bar well maintained?

Package last updated on 07 Aug 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

next-nprogress-bar