next-transition-bar
A lightweight, customizable progress bar for Next.js page transitions. Works with both App Router and Pages Router.
Basic Navigation
Standard client-side navigation between pages.
Slow Page
Page with a simulated delay — see the progress bar in action.
Middleware Redirect
Navigates to /old-path which middleware redirects to /redirect-target.
Programmatic Navigation
Navigate using router.push() and router.replace().
Features
- ✓Works with App Router and Pages Router
- ✓Handles middleware redirects (pushState + replaceState)
- ✓Browser back/forward button support
- ✓Zero memory leaks — event delegation instead of per-element listeners
- ✓Customizable color, height, speed, easing, spinner, and more
- ✓RTL support
- ✓Optional start delay to avoid flashing on fast navigations