Boilerplate

This boilerplate demonstrates how to implement a page loading progress indicator in a Next.js (App Router) application using @bprogress/next.

The progress bar provides visual feedback during navigation between pages — helping users understand that something is happening when a route change occurs.

Technical Overview

• Framework: Next.js (App Router)
• Progress Bar: @bprogress/next
• Integration: Configured as a global Provider that hooks into the Next.js router events
• UI Library: shadcn/ui for consistent design
• Routing Feedback: Automatically tracks navigation start and completion states

Implementation Details

In this example, the BProgressProvider is set up in the main layout to listen to the Next.js router events (routeChangeStart, routeChangeComplete, and routeChangeError), displaying a progress bar whenever a user navigates between pages.

The setup ensures:

• Smooth and responsive transitions
• Automatic start and stop based on route changes
• No manual handling required for each page

Use Case

Ideal for:

• Dashboards
• SaaS applications
• Content-heavy or data-driven platforms

Or, any project where page transitions can take noticeable time.

With this boilerplate, you can quickly set up page loading indicators that enhance usability and deliver a more polished user experience in any Next.js project. ✨