NProgress integration with Next 13 app directory
MIT License
Integrate nprogress with Next.js 13. Compatible with the new app directory structure. Inspired by Next NProgress Bar
Install the package with npm:
npm install @lexz451/next-nprogress
or yarn:
yarn add @lexz451/next-nprogress
or pnpm:
pnpm add @lexz451/next-nprogress
Add the ProgressBar component to your app layout. It will automatically render the progress bar when a page is loading.
import { ProgressBar } from '@lexz451/next-nprogress';
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<head>
<Suspense fallback={true}>
<ProgressBar
color='#333'
height='2px'
options={{
showSpinner: false,
}}
/>
</Suspense>
</head>
<body>
<Navbar />
{children}
<Footer />
</body>
</html>
)
}
Use the Link component provided by next-nprogress.
import { Link } from '@lexz451/next-nprogress';
export default function Navbar() {
return (
<nav>
<Link href="/">Home</Link>
<Link href="/about">About</Link>
</nav>
)
}
Use the router hook provided by next-nprogress.
'use client';
import { useRouter } from '@lexz451/next-nprogress';
export default function Navbar() {
const router = useRouter();
return (
<nav>
<button onClick={() => router.push('/')}>Home</button>
<button onClick={() => router.push('/about')}>About</button>
</nav>
)
}
Available props for the ProgressBar component:
Prop | Type | Default | Description |
---|---|---|---|
color | string | #29D | The color of the progress bar. |
height | string | 2px | The height of the progress bar. |
options | object | {} | The options passed to nprogress. |
passing options to the progress bar:
<ProgressBar
color='#333'
height='2px'
options={{
trickleSpeed: 50,
showSpinner: false,
}}
/>
Contributions are always welcome! Please follow these steps:
new-feature-branch
or bugfix-issue-123
).git checkout -b new-feature-branch
git commit -m 'Implemented new feature.'
git push origin new-feature-branch
This project is licensed under the âšī¸ MIT
License.