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:

``bash
npm install @bprogress/next
`

Import

$3

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

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

$3

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

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

Usage

`tsx
...
`

Example

$3

First approach in a use client layout.

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

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

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (


height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
>
{children}



);
}
`

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...

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

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

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

);
};

export default Providers;
`

Then wrap your application with the Providers component.

`tsx
// 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 (


{children}


);
}
`

$3

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

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


);
}
``

More information on documentation

Go to the documentation to learn more about BProgress.

Issues

If you encounter any problems, do not hesitate to open an issue or make a PR here.

LICENSE

MIT