NextJS progress bar compatible with new app directory
npm install @fractal-web/next-nprogress-barNProgress integration on Next.js compatible with /app and /pages folders
- 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
``bash`
npm install next-nprogress-bar
or
`bash`
yarn add next-nprogress-bar
_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';
`
`javascript`
`jsx
import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar';
export default function App({ Component, pageProps }) {
return (
<>
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
/>
>
);
}
`
`tsx
import type { AppProps } from 'next/app';
import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar';
export default function App({ Component, pageProps }: AppProps) {
return (
<>
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
/>
>
);
}
`
#### 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 (
#### Second approach wrap in a use client Providers component
`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
`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
/>;
``Please file an issue for bugs, missing documentation, or unexpected behavior.
MIT