@oprogress/next
v0.0.1
Published
NProgress bar like for Next.js compatible with new app directory
Maintainers
iaprogrammerReadme
OProgress for Next.js
A progress bar for Next.js, inspired by oprogress.
OProgress integration on Next.js, compatible with the /app and /pages directories. This package re-exports everything from @oprogress/react and @oprogress/core, and additionally provides the useRouter hook for the app directory router.
Installation
To install OProgress, run the following command:
npm install @oprogress/next@oprogress/next is the only package you need for the out-of-the-box progress bar and the useRouter hook for the app directory router.
Quick Start
Import OProgress into your layout and it will automatically start when the user navigates between pages.
App directory
Add it to /app/layout.tsx (inside a 'use client' file):
// app/providers.tsx
'use client';
import { OProgress } from '@oprogress/next';
export default function Providers({ children }: { children: React.ReactNode }) {
return (
<>
<OProgress height="4px" color="#29d" shallowRouting />
{children}
</>
);
}Then wrap your application in /app/layout.tsx:
// app/layout.tsx
import Providers from './providers';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<Providers>{children}</Providers>
</body>
</html>
);
}Pages directory
Add it to /pages/_app.tsx:
// pages/_app.tsx
import type { AppProps } from 'next/app';
import { OProgress } from '@oprogress/next';
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<OProgress height="4px" color="#fffd00" shallowRouting />
<Component {...pageProps} />
</>
);
}useRouter (app directory)
The useRouter hook extends the Next.js router to start and stop the progress bar on programmatic navigation.
import { useRouter } from '@oprogress/next/app';
function Navigation() {
const router = useRouter();
return <button onClick={() => router.push('/about')}>About</button>;
}Documentation
Go to the official documentation to learn more about OProgress.
Inspirations
OProgress is inspired by the excellent work done in:
Issues
If you encounter any problems, do not hesitate to open an issue or make a PR here.
License
MIT