NEXTJS ④Next.jsで画面遷移時プログレスバー(NProgressの紹介)

NProgressは、Webアプリケーションにプログレスバーを簡単に追加できる軽量のJavaScriptライブラリです。Zennなどのサイトでよく使われています。NProgressを使用するための基本的な手順は以下の通りです。

1. NProgressのインストール

まず、NProgressをプロジェクトにインストールします。npmを使用してインストールする場合は以下のコマンドを使用します。

npm install nprogress

2. CSSのインポート

NProgressにはプログレスバーのスタイルを定義するCSSファイルがあります。これをインポートする必要があります。

import 'nprogress/nprogress.css';

3. JavaScriptのインポートと設定

NProgressを使用するJavaScriptファイルに以下のコードを追加します。

import NProgress from 'nprogress';

// プログレスバーの開始
NProgress.start();

// プログレスバーの終了
NProgress.done();

4. プログレスバーのカスタマイズ (オプション)

NProgressはカスタマイズ可能です。例えば、プログレスバーの速度やカラーを変更することができます。

NProgress.configure({ showSpinner: false }); // スピナーを非表示にする
NProgress.configure({ speed: 500 }); // プログレスバーの速度を変更する

これで、基本的な設定は完了です。特定のイベントやHTTPリクエストの際にプログレスバーを表示させたい場合は、そのイベントの開始時にNProgress.start()を呼び出し、終了時にNProgress.done()を呼び出すことで実現できます。

例: Axiosとの連携

例えば、HTTPリクエストライブラリのAxiosと組み合わせる場合は以下のようにします。

import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

axios.interceptors.request.use(config => {
  NProgress.start();
  return config;
});

axios.interceptors.response.use(response => {
  NProgress.done();
  return response;
}, error => {
  NProgress.done();
  return Promise.reject(error);
});

NEXTJS hooks の作成 プログレスバーを表示させる

ページ遷移時にプログレスバーを表示させる hooks を作成します。

Next.js の useRouter でページ遷移時のイベントを取得できるので、イベントごとにプログレスバーの表示/非表示を切り替えます。

プログレスバーの制御は NProgress.start() と NProgress.done() を実行するだけです。

import 'nprogress/nprogress.css'

import { useRouter } from 'next/router'
import NProgress from 'nprogress'
import { useEffect } from 'react'

export const useProgressBarAtTransition = (): void => {
  const router = useRouter()

  useEffect(() => {
    const handleStart = () => {
      NProgress.start()
    }

    const handleStop = () => {
      NProgress.done()
    }

    router.events.on('routeChangeStart', handleStart)
    router.events.on('routeChangeComplete', handleStop)
    router.events.on('routeChangeError', handleStop)

    return () => {
      router.events.off('routeChangeStart', handleStart)
      router.events.off('routeChangeComplete', handleStop)
      router.events.off('routeChangeError', handleStop)
    }
  }, [router])
}

スタイルを修正する　自分のcustomer styleを作成

スタイルはライブラリデフォルトのものを指定していましたが、プログレスバーの色などを変更したい場合は css を修正します。

まずは、公式の css をプロジェクトに作成するので、 Github からコピーしてきます。
https://github.com/rstacruz/nprogress/blob/master/nprogress.css
変更したら _app.tsx でcssをインポートします。

import '../../styles/nprogress.css'

// ..省略..