Adding a loading progress indicatorthat shows automatically when navigating between pages can significantly improve your application's user experience. It provides visual feedback that a new page is loading and reduces perceived latency.
While you could build this yourself, the @bprogress/next package makes it incredibly simple to implement. It works seamlessly with the Next.js App Router and doesn't require any manual state management.
Installation
First, install the package in your Next.js project:
npm install @bprogress/nextUsage
- Wrap your root layout: Import the ProgressProvider and wrap your layout.tsx file with it. This component handles the state of the progress bar for you.
// app/layout.tsx
import { ProgressProvider } from '@bprogress/next';
import './globals.css';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<ProgressProvider>
{children}
</ProgressProvider>
</body>
</html>
);
}- Add the progress bar component: Create a new client component to display the progress bar. You can place this component anywhere in your application, but a common place is the root layout so it's always visible.
// components/ProgressBar.tsx
'use client';
import { ProgressBar } from '@bprogress/next';
export default function AppProgressBar() {
return <ProgressBar />;
}- Import and render the component: Finally, import your new AppProgressBar component into your root layout.
// app/layout.tsx
import { ProgressProvider } from '@bprogress/next';
import AppProgressBar from '@/components/ProgressBar'; // Update this path
import './globals.css';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<ProgressProvider>
{children}
<AppProgressBar />
</ProgressProvider>
</body>
</html>
);
}That's it! Now, whenever you navigate between pages, the progress bar will automatically appear at the top of the screen.
Customization
The ProgressBar component can be customized with various props to match your application's design:
- color: Change the color of the progress bar (e.g., '#FF0000' or 'rgb(255, 0, 0)').
- height: Adjust the thickness of the bar (e.g., '2px').
- background: Set a background color for the container.
- showOnShallow: Control whether the bar shows on shallow navigations (e.g., between anchors on the same page).
For more details on customization, you can check out the @bprogress/next package.
More Dev Tips
Discover more tips and tricks to level up your development skills
Start your scalable and production-ready SaaS today
Save endless hours of development time and focus on what's important for your customers with our SaaS starter kits for Next.js, Nuxt 3 and SvelteKit
Get startedStay up to date
Sign up for our newsletter and we will keep you updated on everything going on with supastarter.