@siamf/next-progress NPM

@siamf/next-progress

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 @siamf/next-progress

App Router

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

import { AppProgressBar } from "@siamf/next-progress";

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 `@siamf/next-progress` instead `next/navigation`.

import { useRouter } from "@siamf/next-progress";

//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 '@siamf/next-progress';

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

For page router you do not handle useRouter separately