Migration from next-nprogress-bar

next-nprogress-bar becomes @bprogress/next!

Behind this new identity lies a major update to the package, bringing plenty of exciting new features.

As the name has changed, there are a few name changes to be made in the package.

Installation

You need to uninstall next-nprogress-bar and install @bprogress/next.

diff - npm uninstall next-nprogress-bar + npm install @bprogress/next

Import

You need to update the import path in your application.

- import { ... } from 'next-nprogress-bar';
+ import { ... } from '@bprogress/next';

Progress Component

Import

Now you don't import a component but a provider to use the progress bar.

// App directory
- import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';
+ import { ProgressProvider } from '@bprogress/next/app';
 
// Pages directory
- import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar';
+ import { ProgressProvider } from '@bprogress/next/pages';

Usage

You'll use the ProgressProvider in the same place, but since it's a provider, it must be around your children.

App directory

- {children}
- <ProgressBar
-   height="4px"
-   color="#fffd00"
-   options={{ showSpinner: false }}
-   shallowRouting
- />
+ <ProgressProvider
+   height="4px"
+   color="#fffd00"
+   options={{ showSpinner: false }}
+   shallowRouting
+ >
+   {children}
+ </ProgressProvider>

Pages directory

- <Component {...pageProps} />
- <ProgressBar
-   height="4px"
-   color="#fffd00"
-   options={{ showSpinner: false }}
-   shallowRouting
- />

+ <ProgressProvider
+   height="4px"
+   color="#fffd00"
+   options={{ showSpinner: false }}
+   shallowRouting
+ >
+   <Component {...pageProps} />
+ </ProgressProvider>

Router (only for App directory)

The showProgressBar option is renamed showProgress.

- router.push('/about', undefined, { showProgressBar: false });
+ router.push('/about', { showProgress: false });

If you use a custom router, you'll need to make these changes:

- const router = useRouter(myCustomRouter);
+ const router = useRouter({ customRouter: myCustomRouter });

Types

The type RouterNProgressOptions is renamed RouterProgressOptions.

- RouterNProgressOptions
+ RouterProgressOptions

Data attributes

If you use data attibutes to prevent or disable the progress bar on certain links, you'll need to make these changes:

// Disable progress bar on specific links
- data-disable-nprogress
+ data-disable-progress
 
// Prevent progress
- data-prevent-nprogress
+ data-prevent-progress

Custom CSS

One of the great new features of BProgress version 1.1 is the ability to use a custom template anywhere in your code. So we use a class instead of an id to select the element.

If you are using custom CSS you will need to make this change:

- #nprogress
+ .bprogress

Issues

If you encounter any issues, please open an issue on the BProgress repository. We'll be happy to help you as soon as possible!

Migration from next-nprogress-bar

On this page