@bprogress/next
v3.2.12
Published
NProgress bar like for Next.js compatible with new app directory
Maintainers
skyleenReadme
BProgress for Next.js
BProgress integration on Next.js compatible with /app and /pages directory.
Next NProgress Bar and NProgress V2 become BProgress!
Migration from next-nprogress-bar
If you are using next-nprogress-bar, you can migrate to @bprogress/next by following the migration guide.
Installation
To install BProgress, run the following command:
npm install @bprogress/nextImport
App Directory
Import into your /app/layout(.js/.jsx/.ts/.tsx) folder.
import { ProgressProvider } from '@bprogress/next/app';Pages Directory
Import into your /pages/_app(.js/.jsx/.ts/.tsx) folder.
import { ProgressProvider } from '@bprogress/next/pages';Usage
<ProgressProvider>...</ProgressProvider>Example
App Directory
First approach in a use client layout.
// In /app/layout.tsx
'use client';
import { ProgressProvider } from '@bprogress/next/app';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<ProgressProvider
height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
>
{children}
</ProgressProvider>
</body>
</html>
);
}Second approach wrap in a use client Providers component. (Recommended)
Create a Providers component to wrap your application with all the components requiring 'use client', such as BProgress or your different contexts...
// In /app/providers.tsx
'use client';
import { ProgressProvider } from '@bprogress/next/app';
const Providers = ({ children }: { children: React.ReactNode }) => {
return (
<ProgressProvider
height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
>
{children}
</ProgressProvider>
);
};
export default Providers;Then wrap your application with the Providers component.
// 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>
);
}Pages Directory
// In /pages/_app.tsx
import type { AppProps } from 'next/app';
import { ProgressProvider } from '@bprogress/next/pages';
export default function App({ Component, pageProps }: AppProps) {
return (
<ProgressProvider
height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
>
<Component {...pageProps} />
</ProgressProvider>
);
}More information on documentation
Go to the documentation to learn more about BProgress.
Issues
If you encounter any problems, do not hesitate to open an issue or make a PR here.
LICENSE
MIT