@bprogress/next NPM

BProgress for Next.js

BProgress integration on Next.js compatible with /app and /pages directory.

Next NProgress Bar and NProgress V2 become BProgress!

Migration from `next-nprogress-bar`

If you are using next-nprogress-bar, you can migrate to @bprogress/next by following the migration guide.

Installation

To install BProgress, run the following command:

npm install @bprogress/next

Import

App Directory

Import into your /app/layout(.js/.jsx/.ts/.tsx) folder.

import { ProgressProvider } from '@bprogress/next/app';

Pages Directory

Import into your /pages/_app(.js/.jsx/.ts/.tsx) folder.

import { ProgressProvider } from '@bprogress/next/pages';

Usage

<ProgressProvider>...</ProgressProvider>

Example

App Directory

First approach in a use client layout.

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

import { ProgressProvider } from '@bprogress/next/app';

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

Second approach wrap in a use client Providers component. (Recommended)

Create a Providers component to wrap your application with all the components requiring 'use client', such as BProgress or your different contexts...

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

import { ProgressProvider } from '@bprogress/next/app';

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

export default Providers;

Then wrap your application with the Providers component.

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

Pages Directory

// In /pages/_app.tsx
import type { AppProps } from 'next/app';
import { ProgressProvider } from '@bprogress/next/pages';

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