Next-app-progress-bar NPM

⚠️ Package Renamed & No Longer Maintained

This package has been renamed to `@siamf/next-progress`

Please use `@siamf/next-progress` instead.

This package is no longer maintained. For the latest updates and improvements, migrate to:

👉 @siamf/next-progress

Next App Progress Bar

A next js (app+page) route top progress bar has all the functionality required, including all the features and fixed from earlier packages. Most popular packages are nextjs-toploader and next-nprogress-bar both has some issues. nextjs-toploader do not come with delay time and even they don't want to give this options as it already has a closed PR . On the other hand next-nprogress-bar has a open issue. I just try solve this issues and give the options also.

Small in Size
delay options
Solve for not showing progress bar on first load
Properly Maintained

Installation

$ npm i next-app-progress-bar

App Router

Import AppProgressBar in your app/layout.tsx/js and place inside the body tag.

import { AppProgressBar } from "next-app-progress-bar";

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                <AppProgressBar />
                {children}
            </body>
        </html>
    );
}

`useRouter` hook support

For triggering progress bar in your app folder, please use follow the steps bellow.

//Import `useRouter` from `next-app-progress-bar` instead `next/navigation`.

import { useRouter } from "next-app-progress-bar";

//Then simple use it as like you normally use from `next/navigation`

Page Router

Import PageProgressBar into your pages/_app.tsx/js and place the component on MyApp.

import { PageProgressBar } from 'next-app-progress-bar';

export default function MyApp({ Component, pageProps }) {
    return (
        <>
            <PageProgressBar />
            <Component {...pageProps} />;
        </>
    );
}

For page router you do not handle useRouter separately