# 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](https://bprogress.vercel.app/docs/next/migration).
## Installation
To install BProgress, run the following command:
```bash
npm install @bprogress/next
```
## Import
### App Directory
Import into your `/app/layout(.js/.jsx/.ts/.tsx)` folder.
```tsx
import { ProgressProvider } from '@bprogress/next/app';
```
### Pages Directory
Import into your `/pages/_app(.js/.jsx/.ts/.tsx)` folder.
```tsx
import { ProgressProvider } from '@bprogress/next/pages';
```
## Usage
```tsx
...
```
## Example
### App Directory
First approach in a use client layout.
```tsx
// In /app/layout.tsx
'use client';
import { ProgressProvider } from '@bprogress/next/app';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
```
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...
```tsx
// In /app/providers.tsx
'use client';
import { ProgressProvider } from '@bprogress/next/app';
const Providers = ({ children }: { children: React.ReactNode }) => {
return (
{children}
);
};
export default Providers;
```
Then wrap your application with the Providers component.
```tsx
// 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}
);
}
```
### Pages Directory
```tsx
// In /pages/_app.tsx
import type { AppProps } from 'next/app';
import { ProgressProvider } from '@bprogress/next/pages';
export default function App({ Component, pageProps }: AppProps) {
return (
);
}
```
## More information on documentation
Go to the [documentation](https://bprogress.vercel.app/docs/next/installation) to learn more about BProgress.
## Issues
If you encounter any problems, do not hesitate to [open an issue](https://github.com/imskyleen/bprogress/issues) or make a PR [here](https://github.com/imskyleen/bprogress).
## LICENSE
MIT