Image for post
Image for post
image source: https://dribbble.com/christophekerebel

Next.js — Make your own Progress bar indicator component easily!!!

In this article, we’ll make a Next.js component which can easily be modified for all kinds of usage using NProgress package, and use it inside our Next.js app.

npm i nextjs-progressbar
Image for post
Image for post

What you should know before making this component

Installing the packages

npm i nprogress
Image for post
Image for post

Code

Splitting the Code

Importing the packages

Creating a Component

Setting the Default Props

Image for post
Image for post

Configuring NProgress and Adding Router events — routeChangeStart, routeChangeComplete & routeChangeError

Setting the PropTypes (optional)

NextNProgress.propTypes = {
color: PropTypes.string,
startPosition: PropTypes.number,
stopDelayMs: PropTypes.number,
options: PropTypes.object,
};

Adding our Component in a Next.js app

<Container>
// other custom logic
<Component {...pageProps} />
</Container>
Image for post
Image for post
<Container>
// other custom logic
<NextNProgress />
<Component {...pageProps} />
</Container>

Change the configurations

<NextNProgress
color="#29D"
startPosition="0.3"
stopDelayMs="200"
height="3"
/>
<NextNProgress
options={{ easing: 'ease', speed: 500 }}
/>

Footnotes

Written by

Subscribe to gosink.in to get latest post updates on tech and design. AI | Web development | Blockchain

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store