Next.js 13 Progressbar

A simple Next.js progressbar component using NProgress with support of next.js 13 and later app dir.

Demo: https://next13-progressbar.vercel.app/

How to install?

``bash
npm i next13-progressbar
`

How to use?

⚠️ _Note_ : This docs are for versions >=1.0.0 only. For the older versions check tags versions tree's Readme of the older version.

After installing the package, create providers.tsx file in app directory to handle contexts and mark it use client. see contexts in app dir and import Next13ProgressBar;

``jsx
'use client';
import React from 'react';
import { Next13ProgressBar } from 'next13-progressbar';

const Providers = ({ children }: { children: React.ReactNode }) => {
return (
<>
{children}


);
};

export default Providers;
`

Wrap your providers in layout.tsx/js

`jsx
import Providers from './providers';

export default function RootLayout({ children }: { children: React.ReactNode }) {
return (


{children}


);
}
`

By default all a tags are handled by next/link so you don't need to do anything.

`jsx
import Link from 'next/link';
import { useRouter } from 'next13-progressbar';

const NavBar = () => {
const router = useRouter();
return (



);
};
`

$3

If no props are passed to , below is the default configuration applied.

`jsx

`

- color: to change the default color of progressbar. You can also use rgb(,,) or rgba(,,,).
- startPosition: to set the default starting position : 0.3 = 30%.
- delay: time for delay to start progressbar in ms.
- stopDelayMs: time for delay to stop progressbar in ms.
- height: height of progressbar in px.
- showOnShallow: You can choose whether you want the progressbar to be displayed if you're using shallow routing. It takes a boolean. Learn more about shallow routing in Next.js docs.

$3

#### Adding nonce

We use internal css in this package. If you are using csp, you can add nonce to the