- Getting started
- Exemple with /pages/_app
- Exemple with /app/layout
- Props
- App directory router
- Migrating from v1 to v2
- Issues
- LICENSE
npm install next-nprogress-baror
yarn add next-nprogress-barImport it into your /pages/_app(.js/.jsx/.ts/.tsx) or /app/layout(.js/.jsx/.ts/.tsx) folder
// In app directory
import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';
// In pages directory
import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar';<ProgressBar />import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar';
export default function App({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<ProgressBar
height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
/>
</>
);
}import type { AppProps } from 'next/app';
import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar';
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<Component {...pageProps} />
<ProgressBar
height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
/>
</>
);
}// In /app/layout.jsx
'use client';
import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
<ProgressBar
height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
/>
</body>
</html>
);
}// 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}
<ProgressBar
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 (
<html lang="en">
<body>
<Providers>{children}</Providers>
</body>
</html>
);
}// In /app/layout.tsx
'use client';
import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
{children}
<ProgressBar
height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
/>
</body>
</html>
);
}// 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}
<ProgressBar
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 (
<html lang="en">
<body>
<Providers>{children}</Providers>
</body>
</html>
);
}Height of the progress bar - by default 2px
Color of the progress bar - by default #0A2FFF
by default undefined
See NProgress docs
If the progress bar is not displayed when you use shallow routing - by default false
See Next.js docs
When the page loads faster than the progress bar, it does not display - by default 0
Your custom CSS - by default NProgress CSS
import { useRouter } from 'next-nprogress-bar';Replace your 'next/navigation' routers with this one. It's the same router, but this one supports NProgress.
const router = useRouter();
router.push('/about');// before (v1)
import ProgressBar from 'next-nprogress-bar';
<ProgressBar
height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
/>;
// after (v2)
import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar';
<ProgressBar
height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
/>;// before (v1)
import ProgressBar from 'next-nprogress-bar';
<ProgressBar
height="4px"
color="#fffd00"
options={{ showSpinner: false }}
appDirectory
shallowRouting
/>;
// after (v2)
import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';
<ProgressBar
height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
/>;Please file an issue for bugs, missing documentation, or unexpected behavior.
MIT