❤
npm
Sign UpSign In

@fractal-web/next-nprogress-bar
TypeScript icon, indicating that this package has built-in type declarations

2.1.2 • Public • Published

Next NProgress bar

NProgress integration on Next.js compatible with /app and /pages folders

Table of Contents

Getting started

Install

npm install next-nprogress-bar

or

yarn add next-nprogress-bar

Import

Import it into your /pages/_app(.js/.jsx/.ts/.tsx) or /app/layout(.js/.jsx/.ts/.tsx) folder

// In app directory
import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';

// In pages directory
import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar';

Use

<ProgressBar />

Exemple with /pages/_app

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
      />
    </>
  );
}

Exemple with /app/layout

JavaScript

First approach in a use client layout

// In /app/layout.jsx
'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>
  );
}

Second approach wrap in a use client Providers component

See Next.js documentation

// Create a Providers component to wrap your application with all the components requiring 'use client', such as next-nprogress-bar or your different contexts...
'use client';

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

const Providers = ({ children }) => {
  return (
    <>
      {children}
      <ProgressBar
        height="4px"
        color="#fffd00"
        options={{ showSpinner: false }}
        shallowRouting
      />
    </>
  );
};

export default Providers;

// Import and use it in /app/layout.jsx
import Providers from './providers';

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

TypeScript

First approach in a use client layout

// In /app/layout.tsx
'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>
  );
}

Second approach wrap in a use client Providers component

See Next.js documentation

// Create a Providers component to wrap your application with all the components requiring 'use client', such as next-nprogress-bar or your different contexts...
'use client';

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

const Providers = ({ children }: { children: React.ReactNode }) => {
  return (
    <>
      {children}
      <ProgressBar
        height="4px"
        color="#fffd00"
        options={{ showSpinner: false }}
        shallowRouting
      />
    </>
  );
};

export default Providers;

// Import and use it in /app/layout.tsx
import Providers from './providers';

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

Props

height optional - string

Height of the progress bar - by default 2px

color optional - string

Color of the progress bar - by default #0A2FFF

options optional - NProgressOptions

by default undefined

See NProgress docs

shallowRouting optional - boolean

If the progress bar is not displayed when you use shallow routing - by default false

See Next.js docs

delay optional - number

When the page loads faster than the progress bar, it does not display - by default 0

style optional - string

Your custom CSS - by default NProgress CSS

App directory router

Import

import { useRouter } from 'next-nprogress-bar';

Use

Replace your 'next/navigation' routers with this one. It's the same router, but this one supports NProgress.

const router = useRouter();

// With progress bar
router.push('/about');
router.back();

// Without progress bar
router.push(
  '/about',
  {},
  {
    showProgressBar: false,
  },
);
router.back({ showProgressBar: false });

Migrating from v1 to v2

Pages directory

// before (v1)
import ProgressBar from 'next-nprogress-bar';

<ProgressBar
  height="4px"
  color="#fffd00"
  options={{ showSpinner: false }}
  shallowRouting
/>;

// after (v2)
import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar';

<ProgressBar
  height="4px"
  color="#fffd00"
  options={{ showSpinner: false }}
  shallowRouting
/>;

App directory

// before (v1)
import ProgressBar from 'next-nprogress-bar';

<ProgressBar
  height="4px"
  color="#fffd00"
  options={{ showSpinner: false }}
  appDirectory
  shallowRouting
/>;

// after (v2)
import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';

<ProgressBar
  height="4px"
  color="#fffd00"
  options={{ showSpinner: false }}
  shallowRouting
/>;

Issues

Please file an issue for bugs, missing documentation, or unexpected behavior.

File an issue

LICENSE

MIT

Readme

Keywords

Package Sidebar

Install

npm i @fractal-web/next-nprogress-bar

Repository

github.com/Fractal-Web/next-nprogress-bar

Homepage

github.com/Fractal-Web/next-nprogress-bar#readme

Weekly Downloads

7

Version

2.1.2

License

MIT

Unpacked Size

44.1 kB

Total Files

10

Last publish

Collaborators

  • fractal-web
Try on RunKit
Report malware