next-nprogress-bar
Advanced tools
NProgress integration on Next.js compatible with /app and /pages folders
npm install next-nprogress-bar
or
yarn add next-nprogress-bar
Import it into your /pages/_app(.js/.jsx/.ts/.tsx) or /app/layout(.js/.jsx/.ts/.tsx) folder
import ProgressBar from 'next-nprogress-bar';
<ProgressBar />
import ProgressBar from 'next-nprogress-bar';
export default function App({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<ProgressBar
height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
/>
</>
);
}
import type { AppProps } from 'next/app';
import ProgressBar from 'next-nprogress-bar';
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<Component {...pageProps} />
<ProgressBar
height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
/>
</>
);
}
// In /app/layout.jsx
'use client';
import ProgressBar from 'next-nprogress-bar';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
<ProgressBar
height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
appDirectory
/>
</body>
</html>
);
}
// Create a Providers component to wrap your application with all the components requiring 'use client', such as next-nprogress-bar or your different contexts...
'use client';
import ProgressBar from 'next-nprogress-bar';
const Providers = ({ children }) => {
return (
<>
{children}
<ProgressBar
height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
appDirectory
/>
</>
);
};
export default Providers;
// Import and use it in /app/layout.jsx
import Providers from './providers';
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<Providers>{children}</Providers>
</body>
</html>
);
}
// In /app/layout.tsx
'use client';
import ProgressBar from 'next-nprogress-bar';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
{children}
<ProgressBar
height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
appDirectory
/>
</body>
</html>
);
}
// Create a Providers component to wrap your application with all the components requiring 'use client', such as next-nprogress-bar or your different contexts...
'use client';
import ProgressBar from 'next-nprogress-bar';
const Providers = ({ children }: { children: React.ReactNode }) => {
return (
<>
{children}
<ProgressBar
height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
appDirectory
/>
</>
);
};
export default Providers;
// Import and use it 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>
);
}
Height of the progress bar - by default 2px
Color of the progress bar - by default #0A2FFF
by default undefined
See NProgress docs
If your are in the new /app directory - by default false
If the progress bar is not displayed when you use shallow routing - by default false
See Next.js docs
When the page loads faster than the progress bar, it does not display - by default 0
Your custom CSS - by default NProgress CSS
Please file an issue for bugs, missing documentation, or unexpected behavior.
MIT
FAQs
NextJS progress bar compatible with new app directory
The npm package next-nprogress-bar receives a total of 61,103 weekly downloads. As such, next-nprogress-bar popularity was classified as popular.
We found that next-nprogress-bar demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.