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-nprogressor yarn:
yarn add @lexz451/next-nprogressor pnpm:
pnpm add @lexz451/next-nprogressAdd 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:
- Fork the project repository. This creates a copy of the project on your account that you can modify without affecting the original project.
- Clone the forked repository to your local machine using a Git client like Git or GitHub Desktop.
- Create a new branch with a descriptive name (e.g.,
new-feature-branchorbugfix-issue-123).
git checkout -b new-feature-branch- Make changes to the project's codebase.
- Commit your changes to your local branch with a clear commit message that explains the changes you've made.
git commit -m 'Implemented new feature.'- Push your changes to your forked repository on GitHub using the following command
git push origin new-feature-branch- Create a new pull request to the original project repository. In the pull request, describe the changes you've made and why they're necessary. The project maintainers will review your changes and provide feedback or merge them into the main branch.
This project is licensed under the ℹ️ MIT License.