Next.jsでページ遷移するときにMaterial UIのプログレスバーを表示する

Next.js TypeScript depp

はじめに

Nest.jsではページ遷移がシームレスに行われるのでプログレスバーを出してあげるとわかりやすいです

大体下記のパッケージを使うのが主流かと思いますが

個人サイトではよくMaterial-UIを使用しているのでそのパターンで実装をします

www.npmjs.com

コンポーネントの実装

下記の用にRouterのeventをハンドリングします

  • routeChangeStart ページ遷移開始時
  • routeChangeComplete ページ遷移完了時
  • routeChangeError ページ遷移中にエラーが起こったとき
import { LinearProgress } from '@material-ui/core';
import Router from 'next/router';
import React from 'react';

export const TransitionProgress = () => {
    const [progress, setProgress] = React.useState(false);

    const setEnabled = React.useCallback(() => setProgress(true), []);
    const setDisabled = React.useCallback(() => setProgress(false), []);

    React.useEffect(() => {
        Router.events.on('routeChangeStart', setEnabled);
        Router.events.on('routeChangeComplete', setDisabled);
        Router.events.on('routeChangeError', setDisabled);

        return () => {
            Router.events.off('routeChangeStart', setEnabled);
            Router.events.off('routeChangeComplete', setDisabled);
            Router.events.off('routeChangeError', setDisabled);
        };
    }, [setEnabled, setDisabled]);

    return progress ? <div style={{ position: 'fixed', top: 0, left: 0, right: 0 }}><LinearProgress /></div> : null;
};

LinearProgressの使い方はこちら material-ui.com

全ページに適用する

最後に _app.tsx に追加して終了です

import { AppProps } from 'next/app';
import React from 'react';
import { TransitionProps } from './TransitionProps';

const App = (props: AppProps) => {
    const { Component, pageProps } = props;

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

export default App;