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

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

スポンサーリンク

検証環境

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

  • React
    • バージョン:18.2.0
  • Next.js
    • バージョン:12.2.5
  • NProgress
    • バージョン:0.2.0

動作例

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

Next.js + TypeScript + NProgress - Codesandbox
Next.js + TypeScript + NProgress

プログラム内容

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」の画面ごとに用意したリンクで画面遷移するとプログレスバーを表示する動作を確認することができます。

まとめ

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

参考資料

「NProgress」の公式サイト

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

「Next.js」の「useRouter」の公式サイト

Functions: useRouter | Next.js
Learn more about the API of the Next.js Router, and access the router instance in your page with the useRouter hook.

「Next.js」のサンプル例の公式サイト(ページ読み込みするときの実装例紹介)

File not found · vercel/next.js
The React Framework. Contribute to vercel/next.js development by creating an account on GitHub.