Table of Contents

- Getting started
- Install
- Import
- Use
- Example with /pages/\_app
- JavaScript
- TypeScript
- Example with /app/layout
- JavaScript
- First approach in a use client layout
- Second approach wrap in a use client Providers component
- TypeScript
- First approach in a use client layout
- Second approach wrap in a use client Providers component
- Data attributes
- Disable progress bar on specific links
- Props
- height
- color
- options
- appDirectory
- shallowRouting
- startPosition
- delay
- disableSameURL
- stopDelay
- nonce
- style
- shouldCompareComplexProps
- targetPreprocessor
- App directory router
- Import
- Types
- Use
- Migrating from v1 to v2
- Issues
- LICENSE

Getting started

$3

``bash
npm install next-nprogress-bar
`

or

`bash
yarn add next-nprogress-bar
`

$3

_Import it into your /pages/\_app(.js/.jsx/.ts/.tsx) or /app/layout(.js/.jsx/.ts/.tsx) folder_

`javascript
// In app directory
import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';

// In pages directory
import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar';
`

$3

`javascript

`

Example with /pages/\_app

$3

`jsx
import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar';

export default function App({ Component, pageProps }) {
return (
<>

height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
/>

);
}
`

$3

`tsx
import type { AppProps } from 'next/app';
import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar';

export default function App({ Component, pageProps }: AppProps) {
return (
<>

height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
/>

);
}
`

Example with /app/layout

$3

#### First approach in a use client layout

`jsx
// In /app/layout.jsx
'use client';

import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';

export default function RootLayout({ children }) {
return (


{children}
height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
/>


);
}
`

#### Second approach wrap in a use client Providers component

See Next.js documentation

##### /components/ProgressBarProvider.jsx

`jsx
// Create a Providers component to wrap your application with all the components requiring 'use client', such as next-nprogress-bar or your different contexts...
'use client';

import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';

const Providers = ({ children }) => {
return (
<>
{children}
height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
/>

);
};

export default Providers;
`

##### /app/layout.jsx

`jsx
// Import and use it in /app/layout.jsx
import Providers from './providers';

export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};

export default function RootLayout({ children }) {
return (


{children}


);
}
`

$3

#### First approach in a use client layout

`tsx
// In /app/layout.tsx
'use client';

import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';

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


{children}
height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
/>


);
}
`

#### Second approach wrap in a use client Providers component

See Next.js documentation

##### /components/ProgressBarProvider.tsx

`tsx
// Create a Providers component to wrap your application with all the components requiring 'use client', such as next-nprogress-bar or your different contexts...
'use client';

import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';

const Providers = ({ children }: { children: React.ReactNode }) => {
return (
<>
{children}
height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
/>

);
};

export default Providers;
`

##### /app/layout.tsx

`tsx
// Import and use it in /app/layout.tsx
import Providers from './providers';

export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};

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


{children}


);
}
`

Data attributes

$3

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._

`jsx

Features

`

$3

You can prevent the progress bar from starting by adding the data-prevent-nprogress={true} attribute.

`jsx

Dashboard
e.preventDefault()} data-prevent-nprogress={true}>
preventDefault


`

Props

$3

Height of the progress bar - by default 2px

$3

Color of the progress bar - by default #0A2FFF

$3

by default undefined

See NProgress docs

$3

If the progress bar is not displayed when you only change URL parameters without changing route - by default false

See Next.js docs

$3

The position the progress bar starts at from 0 to 1 - by default 0

$3

When the page loads faster than the progress bar, it does not display - by default 0

$3

Disable the progress bar when the target URL is the same as the current URL - by default true

$3

The delay in milliseconds before the progress bar stops - by default 0

$3

A cryptographic nonce (number used once) used to declare inline scripts for Content Security Policy - by default undefined

$3

A cryptographic nonce (number used once) used to declare inline scripts for Content Security Policy - by default true

$3

Your custom CSS - by default NProgress CSS

$3

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

$3

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

App directory router

$3

`jsx
import { useRouter } from 'next-nprogress-bar';
`

$3

`tsx
router.push(url: string, options?: NavigateOptions, NProgressOptions?: RouterNProgressOptions)
router.replace(url: string, options?: NavigateOptions, NProgressOptions?: RouterNProgressOptions)
router.back(NProgressOptions?: RouterNProgressOptions)
`

NavigateOptions is the options of the next router.

`tsx
interface RouterNProgressOptions {
showProgressBar?: boolean;
startPosition?: number;
disableSameURL?: boolean;
}
`

$3

Replace your 'next/navigation' routers with this one. It's the same router, but this one supports NProgress.

`tsx
const router = useRouter();

// With progress bar
router.push('/about');
router.replace('/?counter=10');
router.back();
`

Migrating from v1 to v2

$3

`jsx
// before (v1)
import ProgressBar from 'next-nprogress-bar';

height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
/>;

// after (v2)
import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar';

height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
/>;
`

$3

`jsx
// before (v1)
import ProgressBar from 'next-nprogress-bar';

height="4px"
color="#fffd00"
options={{ showSpinner: false }}
appDirectory
shallowRouting
/>;

// after (v2)
import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';

height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
/>;
``

Issues

Please file an issue for bugs, missing documentation, or unexpected behavior.

File an issue

LICENSE

MIT