Gathering detailed insights and metrics for next-nprogress-bar
Gathering detailed insights and metrics for next-nprogress-bar
BProgress is a lightweight, customizable progress bar for better user experience.
Installations
npm install next-nprogress-barDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
20.13.1
NPM Version
10.9.0
Score
99.5
Supply Chain
100
Quality
83.8
Maintenance
100
Vulnerability
100
License
Releases
109
@bprogress/next@3.2.12
@bprogress/next@3.2.12
Updated on Apr 14, 2025
@bprogress/remix@1.0.19
@bprogress/remix@1.0.19
Updated on Apr 14, 2025
@bprogress/react@1.2.7
@bprogress/react@1.2.7
Updated on Apr 14, 2025
@bprogress/vue@1.1.5
@bprogress/vue@1.1.5
Updated on Apr 14, 2025
@bprogress/core@1.3.4
@bprogress/core@1.3.4
Updated on Apr 14, 2025
@bprogress/next@3.2.10
@bprogress/next@3.2.10
Updated on Mar 14, 2025
Languages
6
TypeScript
MDX
Vue
CSS
JavaScript
HTML
TypeScript (66.05%)
MDX (22.49%)
Vue (5.04%)
CSS (2.79%)
JavaScript (2.02%)
HTML (1.6%)
Developer
Download Statistics
Total Downloads
3,846,726
Last Day
14,804
Last Week
86,747
Last Month
385,612
Last Year
3,332,233
GitHub Statistics
MIT License
544 Stars
193 Commits
38 Forks
1 Watchers
1 Branches
20 Contributors
Updated on May 13, 2025
Bundle Size
14.15 kB
Minified
4.47 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
2.4.7
Package Id
next-nprogress-bar@2.4.7
Unpacked Size
79.72 kB
Size
16.15 kB
File Count
11
NPM Version
10.9.0
Node Version
20.13.1
Published on
Feb 18, 2025
Total Downloads
Cumulative downloads
Total Downloads
3,846,726
Last Day
-8.3%
14,804
Compared to previous day
Last Week
-1.8%
86,747
Compared to previous week
Last Month
-4.5%
385,612
Compared to previous month
Last Year
548.1%
3,332,233
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Next NProgress bar
NProgress integration on Next.js compatible with /app and /pages folders
Next NProgress Bar and NProgress V2 become BProgress!
The next-nprogress-bar and nprogress-v2 packages remain available and usable in their current versions, but will no longer be maintained. We therefore advise you to migrate to @bprogress/next.
Migration to BProgress
Go to the migration documentation
Table of Contents
- Getting started
- Example with /pages/_app
- Example with /app/layout
- Data attributes
- Props
- App directory router
- Migrating from v1 to v2
- Issues
- LICENSE
Getting started
Install
1npm install next-nprogress-bar
or
1yarn add next-nprogress-bar
Import
Import it into your /pages/_app(.js/.jsx/.ts/.tsx) or /app/layout(.js/.jsx/.ts/.tsx) folder
1// In app directory 2import { AppProgressBar as ProgressBar } from 'next-nprogress-bar'; 3 4// In pages directory 5import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar';
Use
1<ProgressBar />
Example with /pages/_app
JavaScript
1import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar'; 2 3export default function App({ Component, pageProps }) { 4 return ( 5 <> 6 <Component {...pageProps} /> 7 <ProgressBar 8 height="4px" 9 color="#fffd00" 10 options={{ showSpinner: false }} 11 shallowRouting 12 /> 13 </> 14 ); 15}
TypeScript
1import type { AppProps } from 'next/app'; 2import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar'; 3 4export default function App({ Component, pageProps }: AppProps) { 5 return ( 6 <> 7 <Component {...pageProps} /> 8 <ProgressBar 9 height="4px" 10 color="#fffd00" 11 options={{ showSpinner: false }} 12 shallowRouting 13 /> 14 </> 15 ); 16}
Example with /app/layout
JavaScript
First approach in a use client layout
1// In /app/layout.jsx 2'use client'; 3 4import { AppProgressBar as ProgressBar } from 'next-nprogress-bar'; 5 6export default function RootLayout({ children }) { 7 return ( 8 <html lang="en"> 9 <body> 10 {children} 11 <ProgressBar 12 height="4px" 13 color="#fffd00" 14 options={{ showSpinner: false }} 15 shallowRouting 16 /> 17 </body> 18 </html> 19 ); 20}
Second approach wrap in a use client Providers component
/components/ProgressBarProvider.jsx
1// Create a Providers component to wrap your application with all the components requiring 'use client', such as next-nprogress-bar or your different contexts... 2'use client'; 3 4import { AppProgressBar as ProgressBar } from 'next-nprogress-bar'; 5 6const Providers = ({ children }) => { 7 return ( 8 <> 9 {children} 10 <ProgressBar 11 height="4px" 12 color="#fffd00" 13 options={{ showSpinner: false }} 14 shallowRouting 15 /> 16 </> 17 ); 18}; 19 20export default Providers;
/app/layout.jsx
1// Import and use it in /app/layout.jsx 2import Providers from './providers'; 3 4export const metadata = { 5 title: 'Create Next App', 6 description: 'Generated by create next app', 7}; 8 9export default function RootLayout({ children }) { 10 return ( 11 <html lang="en"> 12 <body> 13 <Providers>{children}</Providers> 14 </body> 15 </html> 16 ); 17}
TypeScript
First approach in a use client layout
1// In /app/layout.tsx 2'use client'; 3 4import { AppProgressBar as ProgressBar } from 'next-nprogress-bar'; 5 6export default function RootLayout({ 7 children, 8}: { 9 children: React.ReactNode; 10}) { 11 return ( 12 <html lang="en"> 13 <body> 14 {children} 15 <ProgressBar 16 height="4px" 17 color="#fffd00" 18 options={{ showSpinner: false }} 19 shallowRouting 20 /> 21 </body> 22 </html> 23 ); 24}
Second approach wrap in a use client Providers component
/components/ProgressBarProvider.tsx
1// Create a Providers component to wrap your application with all the components requiring 'use client', such as next-nprogress-bar or your different contexts... 2'use client'; 3 4import { AppProgressBar as ProgressBar } from 'next-nprogress-bar'; 5 6const Providers = ({ children }: { children: React.ReactNode }) => { 7 return ( 8 <> 9 {children} 10 <ProgressBar 11 height="4px" 12 color="#fffd00" 13 options={{ showSpinner: false }} 14 shallowRouting 15 /> 16 </> 17 ); 18}; 19 20export default Providers;
/app/layout.tsx
1// Import and use it in /app/layout.tsx 2import Providers from './providers'; 3 4export const metadata = { 5 title: 'Create Next App', 6 description: 'Generated by create next app', 7}; 8 9export default function RootLayout({ 10 children, 11}: { 12 children: React.ReactNode; 13}) { 14 return ( 15 <html lang="en"> 16 <body> 17 <Providers>{children}</Providers> 18 </body> 19 </html> 20 ); 21}
Data attributes
Disable progress bar on specific links
You can disable the progress bar on specific links by adding the data-disable-nprogress={true} attribute.
/!\ This will not work for Link in svg elements.
1<Link href="#features" data-disable-nprogress={true}> 2 Features 3</Link>
Prevent progress
You can prevent the progress bar from starting by adding the data-prevent-nprogress={true} attribute.
1<Link href="/dashboard"> 2 <span>Dashboard</span> 3 <span onClick={(e) => e.preventDefault()} data-prevent-nprogress={true}> 4 preventDefault 5 </span> 6</Link>
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
spinnerPosition optional - SpinnerPosition ('top-left' | 'top-right' | 'bottom-left' | 'bottom-right')
Position of the spinner (if showSpinner is true) - by default top-right
shallowRouting optional - boolean
Do not display the progress bar when the query parameters change but the route remains the same - by default false
See Next.js docs
startPosition optional - number
The position the progress bar starts at from 0 to 1 - by default 0
delay optional - number
When the page loads faster than the progress bar, it does not display - by default 0
disableSameURL optional - boolen
Disable the progress bar when the target URL is the same as the current URL - by default true
stopDelay optional - number
The delay in milliseconds before the progress bar stops - by default 0
nonce optional - string
A cryptographic nonce (number used once) used to declare inline scripts for Content Security Policy - by default undefined
memo optional - boolean
A cryptographic nonce (number used once) used to declare inline scripts for Content Security Policy - by default true
style optional - string
Your custom CSS - by default NProgress CSS
disableStyle
Disable the default CSS - by default false If you need to disable the default CSS, you will need to add your own CSS to see the progress bar. You can use NProgress CSS as a base.
shouldCompareComplexProps optional - boolean
Activates a detailed comparison of component props to determine if a rerender is necessary.
When true, the component will only rerender if there are changes in key props such as color, height, shallowRouting, delay, options, and style.
This is useful for optimizing performance in scenarios where these props change infrequently. If not provided or set to false, the component will assume props have not changed and will not rerender, which can enhance performance in scenarios where the props remain static. - by default undefined
targetPreprocessor optional - (url: URL) => URL - (only for app directory progress bar)
Provides a custom function to preprocess the target URL before comparing it with the current URL.
This is particularly useful in scenarios where URLs undergo transformations, such as localization or path modifications, after navigation.
The function takes a URL object as input and should return a modified URL object.
If this prop is provided, the preprocessed URL will be used for comparisons, ensuring accurate determination of whether the navigation target is equivalent to the current URL.
This can prevent unnecessary display of the progress bar when the target URL is effectively the same as the current URL after preprocessing. - by default undefined
startOnLoad optional - boolean
Start the progress bar on load - by default false
App directory router
Import
1import { useRouter } from 'next-nprogress-bar';
Types
1router.push(url: string, options?: NavigateOptions, NProgressOptions?: RouterNProgressOptions) 2router.replace(url: string, options?: NavigateOptions, NProgressOptions?: RouterNProgressOptions) 3router.back(NProgressOptions?: RouterNProgressOptions) 4router.refresh(NProgressOptions?: RouterNProgressOptions)
NavigateOptions is the options of the next router.
1interface RouterNProgressOptions { 2 showProgressBar?: boolean; 3 startPosition?: number; 4 disableSameURL?: boolean; 5}
Use
Replace your 'next/navigation' routers with this one. It's the same router, but this one supports NProgress.
1const router = useRouter(); 2 3// With progress bar 4router.push('/about'); 5router.replace('/?counter=10'); 6router.back(); 7router.refresh();
It also has an optional parameter (customRouter) that allows you to use this router with another custom router (for example, it could be the one from next-intl):
1import { useRouter as useAnotherCustomRouter } from 'sample-package'; 2const router = useRouter(useAnotherCustomRouter); 3 4// With progress bar 5router.push('/about'); 6router.replace('/?counter=10'); 7router.back(); 8router.refresh();
Migrating from v1 to v2
Pages directory
1// before (v1) 2import ProgressBar from 'next-nprogress-bar'; 3 4<ProgressBar 5 height="4px" 6 color="#fffd00" 7 options={{ showSpinner: false }} 8 shallowRouting 9/>; 10 11// after (v2) 12import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar'; 13 14<ProgressBar 15 height="4px" 16 color="#fffd00" 17 options={{ showSpinner: false }} 18 shallowRouting 19/>;
App directory
1// before (v1) 2import ProgressBar from 'next-nprogress-bar'; 3 4<ProgressBar 5 height="4px" 6 color="#fffd00" 7 options={{ showSpinner: false }} 8 appDirectory 9 shallowRouting 10/>; 11 12// after (v2) 13import { AppProgressBar as ProgressBar } from 'next-nprogress-bar'; 14 15<ProgressBar 16 height="4px" 17 color="#fffd00" 18 options={{ showSpinner: false }} 19 shallowRouting 20/>;
Issues
I am no longer upgrading this package. If you encounter any problems, do not hesitate to make a PR here.
LICENSE
MIT
No vulnerabilities found.
No security vulnerabilities found.