【Next.js】NProgressを使用して画面遷移するときにプログレスバー表示する実装例

今回は、「Next.js + TypeScript」と「NProgress」を使用して、画面遷移するときにプログレスバーを表示する実装方法の例を紹介していきます。

検証環境
動作例
プログラム内容
1. Routing
2. Pages
まとめ
参考資料

検証環境

検証に使用した環境／ライブラリを次に記載します。

React
- バージョン：18.2.0
Next.js
- バージョン：12.2.5
NProgress
- バージョン：0.2.0

動作例

プロジェクト情報の詳細と動作例は、次のサイトで確認することができます。

https://codesandbox.io/s/next-js-typescript-nprogress-v7lzhh

プログラム内容

Routing

「Next.js」の「Routing」機能を使用して画面遷移するときに、プログレスバーを表示する仕組みを実装することができます。

【components/hooks/useTransition.ts】

プログレスバーを表示するコンポーネントの全体ソースコードは、次のようになります。

import { useRouter } from "next/router";
import { useEffect } from "react";
import NProgress from "nprogress";
import "nprogress/nprogress.css";

const useTransition = () => {
  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]);
};

export default useTransition;

import文に次の値を指定しています。

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

「NProgress」コンポーネントとデザインを適用するためのCSSを指定します。CSSの詳細については、次のサイトでも確認することができます。

nprogress/nprogress.css at master · rstacruz/nprogress

For slim progress bars like on YouTube, Medium, etc - rstacruz/nprogress

プログレスバーの表示開始処理は、次の箇所になります。「NProgress」の「start」メソッドを使用することで表示開始になります。

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

プログレスバーの表示終了処理は、次の箇所になります。「NProgress」の「done」メソッドを使用することで表示終了になります。

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

「Routing」機能の「useRouter」へのイベント指定処理は、次の箇所になります。

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

イベント指定は「events.on」を使用して、イベント名とイベント発生時のメソッドを指定します。イベント名ごとの動作は、次のようになります。

routeChangeStart
- 画面遷移を開始したときに実行する処理を指定することができます。プログレスバーの表示開始を実施します。
routeChangeComplete
- 画面遷移を完了したときに実行する処理を指定することができます。プログレスバーの表示終了を実施します。
routeChangeError
- 画面遷移でエラー、キャンセルなどが発生したときに実行する処理を指定することができます。プログレスバーの表示終了を実施します。

コンポーネントが破棄されたときのクリーンアップ処理は、次の箇所になります。登録したイベント情報を削除しています。

   return () => {
      router.events.off("routeChangeStart", handleStart);
      router.events.off("routeChangeComplete", handleStop);
      router.events.off("routeChangeError", handleStop);
    };

Pages

画面の処理例は、それぞれ次のようになります。

【pages/_app.tsx】

import type { AppProps } from "next/app";
import useTransition from "../components/hooks/useTransition";

const App = ({ Component, pageProps }: AppProps) => {
  useTransition();
  return <Component {...pageProps} />;
};

export default App;

コンポーネントとして作成した「useTransition」の呼び出し処理を実施しています。ここで指定することでページごとに処理を実装しなくてもプログレスバーを表示することができるようになります。

【pages/index.tsx】

画面を作成します。別画面へのリンクが用意されている画面になります。

import type { NextPage } from "next";
import Link from "next/link";

const Index: NextPage = () => {
  return (
    <div>
      <div>Next.js + TypeScript + NProgress example.</div>
      <div>This is index page.</div>
      <Link href="about">about</Link>
    </div>
  );
};

export default Index;

【pages/about.tsx】

画面を作成します。別画面へのリンクが用意されている画面になります。

import type { NextPage } from "next";
import Link from "next/link";

const About: NextPage = () => {
  return (
    <div>
      <div>Next.js + TypeScript + NProgress example.</div>
      <div>This is about page.</div>
      <Link href="/">index</Link>
    </div>
  );
};

export default About;

「index」と「about」の画面ごとに用意したリンクで画面遷移するとプログレスバーを表示する動作を確認することができます。