Next.js의 페이지 로드 진행률 표시줄

This was originally posted on my blog on 27th October 2020.

이 게시물에서는 YouTube, GitHub 및 내 사이트와 같은 페이지 로딩 표시기를 구현하는 방법을 보여줍니다.

The example above is running with the cache disabled and the "Slow 3G" preset.

시작하려면 @badrap/bar-of-progress 종속성을 설치하십시오.

yarn add @badrap/bar-of-progress

그런 다음 아직 수행하지 않은 경우 _app.js에 pages 파일을 생성합니다.

// pages/_app.js

const MyApp = ({ Component, pageProps }) => {
  return <Component {...pageProps} />;
};

export default MyApp;

다음으로 bar-of-progress 종속성을 _app.js로 가져오고 새 진행률 표시줄을 선언합니다.

import ProgressBar from "@badrap/bar-of-progress";

const progress = new ProgressBar({
  size: 2,
  color: "#38a169",
  className: "bar-of-progress",
  delay: 100,
});

// ...

Next.js Router's events을 사용하여 진행률 표시줄을 제어합니다.

// ...
import Router from "next/router";

// ...

Router.events.on("routeChangeStart", progress.start);
Router.events.on("routeChangeComplete", progress.finish);
Router.events.on("routeChangeError", progress.finish);

// ...

마지막으로 _app.js 파일은 다음과 같아야 합니다.

import ProgressBar from "@badrap/bar-of-progress";
import Router from "next/router";

const progress = new ProgressBar({
  size: 2,
  color: "#38a169",
  className: "bar-of-progress",
  delay: 100,
});

Router.events.on("routeChangeStart", progress.start);
Router.events.on("routeChangeComplete", progress.finish);
Router.events.on("routeChangeError", progress.finish);

const MyApp = ({ Component, pageProps }) => {
  return <Component {...pageProps} />;
};

export default MyApp;

모든 것이 순조롭게 진행된다면 페이지 사이를 전환하는 동안 사이트 상단에 진행률 표시줄이 표시되어야 합니다.

때때로 내 사이트의 경우처럼 진행률 표시줄이 다른 요소 뒤에 숨겨져 있을 수 있습니다.

이 문제를 해결하려면 CSS의 진행률 표시줄z-index을 늘리기만 하면 됩니다.

.bar-of-progress {
  z-index: 50;
}

클래스 이름은 진행률 표시줄을 선언할 때 지정한 className 속성입니다.

const progress = new ProgressBar({
  size: 2,
  color: "#38a169",
  className: "bar-of-progress",
  delay: 100,
});