Next.js route loading bar visual
Development

next-nprogress-bar in Next.js: Quick Setup and Practical Usage

Editor | February 26, 2026 | 3 min read

Perceived performance matters as much as raw speed. When users click a link and nothing changes immediately, the UI can feel broken even if navigation completes quickly.

next-nprogress-bar solves this by showing a slim loading indicator during route transitions in Next.js.

What the Library Does

The package integrates NProgress behavior into Next.js apps and supports both routing styles:

  • /pages router via PagesProgressBar
  • /app router via AppProgressBar

This makes it useful for teams migrating from the Pages Router to the App Router while keeping consistent loading feedback.

Basic Setup

Install:

npm install next-nprogress-bar

Example in App Router layout:

import { AppProgressBar as ProgressBar } from "next-nprogress-bar"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <ProgressBar height="3px" color="#ec4899" options={{ showSpinner: false }} />
      </body>
    </html>
  )
}
Useful Configuration

Common props that teams usually tune first:

  • height: bar thickness
  • color: brand color
  • options: NProgress options like spinner behavior
  • shallowRouting: reduce unnecessary progress triggers

You can also disable progress on specific links using data-disable-nprogress={true} where needed.

Maintenance Status You Should Know

As of the package README on npm, next-nprogress-bar remains usable in its current versions, but active maintenance has shifted and migration is recommended to the BProgress ecosystem (for example @bprogress/next).

For existing projects, this means:

  1. Keep using next-nprogress-bar if it is stable in production.
  2. Plan migration during routine dependency updates.
  3. Prefer BProgress packages for new builds to reduce future migration cost.
Final Take

If your goal is better navigation feedback with minimal implementation effort, next-nprogress-bar is still a practical option. Just treat it as a transitional dependency and keep a clear migration path to BProgress.

Official package: https://www.npmjs.com/package/next-nprogress-bar