🌸

Next.js14 AppRouterでプログレスバーを表示させる

2024/03/01に公開

Next.js

TypeScript

microCMS

tech

今回初めてAppRouterで開発をするということで現在プロジェクトのプロトタイプを作ってるのですが….

いつも使っていたプログレスバーのライブラリ↓

https://rstacruz.github.io/nprogress/

がAppRouterでどう使って良いかちんぷんかんだったので新たにライブラリを見つけてきました。

Next Js TopLoader

というNext14にも対応した新しいやつみたいです。

まあとにかく使い方簡単なのでさっと解説していこうと思います。

ライブラリのインストール

npm

npm install nextjs-toploader

bun

bun install nextjs-toploader

yarn

yarn add nextjs-toploader

インポート

import NextTopLoader from 'nextjs-toploader';

Layout.tsx(jsx)内に記述

src/app/Layout.tsx

import NextTopLoader from 'nextjs-toploader';

export default function Layout({ children }) {
  return (
    <html lang="ja">
      <body>
        <NextTopLoader />
        {children}
      </body>
    </html>
  );
}

はい。これで終わりです。笑

オプション

デフォルトの設定は以下の通り。

<NextTopLoader
  color="#2299DD"
  initialPosition={0.08}
  crawlSpeed={200}
  height={3}
  crawl={true}
  showSpinner={true}
  easing="ease"
  speed={200}
  shadow="0 0 10px #2299DD,0 0 5px #2299DD"
  template='<div class="bar" role="bar"><div class="peg"></div></div> 
  <div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
  zIndex={1600}
  showAtBottom={false}
/>

以下オプションのカスタマイズができます。

color: TopLoaderのデフォルトの色を変更します。
initialPosition: TopLoaderの初期位置をパーセンテージで変更します。例: 0.08 = 8%。
crawlSpeed: 遅延速度の増加をミリ秒単位で設定します。
speed: TopLoaderのアニメーション速度をミリ秒単位で設定します。
easing: イージングを使用したアニメーション設定（CSSのイージング文字列）。
height: TopLoaderの高さをピクセル単位で設定します。
crawl: TopLoaderの自動増加動作。
showSpinner: スピナーを表示するかどうか。
shadow: TopLoaderになめらかな影を付けます。（無効にするにはfalseに設定します）
template: TopLoaderにカスタムHTML属性を含めるために使用します。
zIndex: TopLoaderのzIndexを定義します。
showAtBottom: TopLoaderを下部に表示します。（モバイルデバイスでの可視性を確保するためにTopLoaderの高さを増やしてください）

って感じでただ日本語訳したしょうもない内容ですがAppRouter開発でプログレスバーを表示する際はぜひ使ってみてください。

最近Jリーグのセレッソ大阪さんのHPがmicroCMS × Next.jsでJリーグのサイトでは初めてモダンな技術が使われたというお話がありました。

https://www.cerezo.jp/

自分はサッカーよく観に行くのですが、JのチームのHPってめっちゃ重いところ多いんですよね…

拝見させていただいたところ表示速度が速いとやはり全然ユーズアビリティが違うなと感じました。

ただ一つめちゃくちゃ気になったことがあって、

最初セレッソさんのHPにプログレスバーが無くて、表示速度は早いけどなんかぎこちない感じがしました。

静的ページが多いプロジェクトなら良いけど動的ページが多いプロジェクトにはプログレスバーって重要な存在なんだなって気付かされました。

なお現在はセレッソさんのHPにも搭載されていてより素晴らしいものになっています！

他のJクラブもぜひ見習って欲しいなぁ...と開発者目線で見ております….笑

Next Js TopLoader

ライブラリのインストール

インポート

Layout.tsx(jsx)内に記述

オプション

Discussion