Table of Contents

- Getting started
- Install
- Import
- Use
- Exemple with /pages/\_app
- JavaScript
- TypeScript
- Exemple 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
- Props
- height
- color
- options
- appDirectory
- shallowRouting
- delay
- style
- App directory router
- Import
- 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

`

Exemple 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
/>

);
}
`

Exemple 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

`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;

// 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

`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;

// 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}


);
}
`

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 use shallow routing - by default false

See Next.js docs

$3

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

$3

Your custom CSS - by default NProgress CSS

App directory router

$3

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

$3

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

`jsx
const router = useRouter();

// With progress bar
router.push('/about');
router.back();

// Without progress bar
router.push(
'/about',
{},
{
showProgressBar: false,
},
);
router.back({ showProgressBar: false });
`

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