【超簡単】Next.jsのページ遷移時にLoadingを表示させる方法

Next.jsの初回アクセス後にnext/router等で画面遷移すると、getServerSidePropsの処理中が挟むことによって画面遷移の待ちが発生してしまいます。

フリーズしているような見た目になってしまうので、見た目としてあまり好ましくありません。待機中にloadingしているように見せるライブラリがありましたので、今回はそちらを紹介します。

NProgressを使用したローディングの実装例

NProgressというライブラリを使用することでNext.jsの画面に簡単に以下のようなローディングバーを表示することができます。

インストール方法

yarn add nprogress

Typescriptの場合は以下もインストールします

yarn add -D @types/nprogress

実装例

インストールが完了しましたら、_app.tsに以下のコードを入れるだけでローディングバーを表示させることができます。

ステータス管理などを自前で用意する必要がありませんので導入がとてもラクです。簡易的なローディングであればこれで十分だと思います。

import Router from 'next/router';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

Router.events.on('routeChangeStart', () => NProgress.start());
Router.events.on('routeChangeComplete', () => NProgress.done());
Router.events.on('routeChangeError', () => NProgress.done());

function MyApp() {
// ...以下省略