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

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

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

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

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

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