🍡

Next.jsでページ読み込みのプログレスバーを自作する(メモ)

2022/08/09に公開
2

ググるとこれが出てくる
https://github.com/apal21/nextjs-progressbar

けどなんか右にぐるぐるが出てくる。やだ。自分で作ってみることにした。

基本方針はfixedにしたdiv要素のwidthをrouterのイベントに応じてアニメーションする。上のレポを覗いてみるとロードの進捗を正確に反映しているわけではないようだ。router.eventsのロード開始と完了イベントを使おう。

下の設定ではロード開始時に全体の横幅の30%からスタートして90%に向けてwidthが増えるようにアニメーションする。ロードが完了したら90%から100%に向けてアニメーションする。つまりロードが開始したらロード状況に関わらず30%から90%までぐーんと伸びる。完了しないと90%でとまる。完了すると90%から100%まで伸びてさっと消える。

import { useRouter } from "next/router"
import { useEffect, useState } from "react"

export default function ProgessBar() {  
    const router = useRouter();
    useEffect(() => {
      router.events.on("routeChangeStart", e => {
        setBar({d: "1s", n:"barstart"})
      });
      router.events.on("routeChangeComplete", e => {
        setBar({d: "0.2s", n:"barcomp"})
      });
    }, []);
    const [bar, setBar] = useState({d: "5s", n:"barstart"});  
    return (
        <div style={{
            height: "3px",
            position: "fixed",
            backgroundColor: "rgb(30, 41, 59)",
            borderRadius: "0px 1px 1px 0px",
            animation: bar.d + " 0s normal backwards running " + bar.n
          }}></div>    
    )
}

global.cssでキーフレームを設定する。

@keyframes barstart {
  from {
    width: 30%;
  }
  to {
    width: 90%;
  }
}

@keyframes barcomp {
  from {
    width: 90%;
  }
  to {
    width: 100%;
  }
}

こんな感じ。デモページ載せるのだるくて文字だけになってしまった。。すまん

参考)router.events

https://nextjs.org/docs/api-reference/next/router

Discussion

ega4432ega4432

けどなんか右にぐるぐるが出てくる。

本記事の内容とはズレますが…こちらについては options prop を使用すると、スピナーを非表示するにすることができたのでコメント残させていただきます 🙏

<NextNProgress options={{ showSpinner: false }} />

よく見ると README にも下記のような記載がありました。

You can use other configurations which NProgress provides by adding a JSON in options props.

nekoneko

そうなんですね。ちゃんと読まずにできらあ!でやってしまいました。ありがとうございます