next-nprogress-bar - Improve Loading Experience with NProgress for Next.js

Introduction to Next NProgress Bar

The Next NProgress Bar is a tool designed to seamlessly integrate a progress bar into a Next.js project. It is compatible with both the /app and /pages folders, providing developers with a visual representation of the loading process during page navigation. This project is particularly useful for enhancing user experience by clearly indicating page transitions.

Getting Started

Installation

Developers can quickly add the Next NProgress Bar to their project using npm or yarn. Simply run the following commands:

For npm:

npm install next-nprogress-bar

For yarn:

yarn add next-nprogress-bar

Importing the Module

Once installed, the progress bar can be imported into either the /pages/_app or /app/layout file as needed:

For the app directory:

import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';

For the pages directory:

import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar';

Using the Progress Bar

Integrate the progress bar into your component by simply adding it:

<ProgressBar />

Example Implementations

Using /pages/_app

Add the progress bar in both JavaScript and TypeScript by importing the appropriate module and specifying parameters such as height, color, and options.

JavaScript:

import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar';

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <ProgressBar
        height="4px"
        color="#fffd00"
        options={{ showSpinner: false }}
        shallowRouting
      />
    </>
  );
}

TypeScript:

import type { AppProps } from 'next/app';
import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <ProgressBar
        height="4px"
        color="#fffd00"
        options={{ showSpinner: false }}
        shallowRouting
      />
    </>
  );
}

Using /app/layout

This can be implemented by creating a custom Providers component to include in your application layout.

JavaScript:

'use client';

import { AppProgressBar as 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
        />
      </body>
    </html>
  );
}

TypeScript:

'use client';

import { AppProgressBar as 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
        />
      </body>
    </html>
  );
}

Data Attributes

The Next NProgress Bar allows customization, such as disabling the progress bar on specific links using data-disable-nprogress={true}. This is useful for specific scenarios like preventing the bar from appearing on certain clicks or page transitions.

Customization with Props

The tool provides various properties that allow developers to customize the progress bar’s appearance and behavior:

Height: Sets the height of the bar, default is 2px.
Color: Changes the color of the bar, default is #0A2FFF.
Options: Provides additional NProgress options, such as whether to show a spinner.
Shallow Routing: Controls whether the bar appears for URL parameter changes without route changes.
Start and Stop Delay: Customizes when and how the progress animation appears or disappears.
Style: Allows for custom CSS styling to be applied.

Migrating from Version 1 to Version 2

With the introduction of the second version, users need to adjust their imports. The module for the pages directory has changed from:

import ProgressBar from 'next-nprogress-bar';

To:

import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar';

Similarly, in the app directory, import adjustments are needed for utilizing the latest features and improvements.

Issues and Contributions

While the package is no longer actively updated, users are encouraged to contribute and report any issues. Contributions can be made through GitHub pull requests.

Licensing

Next NProgress Bar is licensed under MIT, making it open-source and free for modification and distribution under the license’s terms.

In summary, the Next NProgress Bar is a versatile tool for enhancing the visibility of page changes in Next.js applications. Its ease of integration and extensive customization options make it an excellent addition for developers aiming to improve user interface dynamics.