@os-team/next-nprogress

Slim progress bar for Next.js applications.

Initializes nprogress for Next.js and applies styles using Emotion.

Usage

Step 1. Install the package

yarn add @os-team/next-nprogress

Step 2. Initialize nprogress in the ./pages/_app.tsx file

import React, { useEffect, useMemo } from 'react';
import { initNProgress, NProgressGlobalStyles } from '@os-team/next-nprogress';
import { ThemeProvider } from '@os-design/theming';
import { useRouter } from 'next/router';

const App: React.FC = ({ Component, pageProps }) => {
  const router = useRouter();

  // Initialize nprogress
  useEffect(() => {
    initNProgress(router);
  }, [router]);

  return (
    <ThemeProvider>
      <NProgressGlobalStyles />
      <Component {...pageProps} />
    </ThemeProvider>
  );
};

export default App;

Note that NProgressGlobalStyles must be inside ThemeProvider, as it uses the colorPrimary from theme.