badrap/bar-of-progress

시작하려면 @badrap/bar-of-progress종속성을 설치해야한다.

yarn add @badrap/bar-of-progress
npm i @badrap/bar-of-progress

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

pages/_app.js

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

export default MyApp;

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

pages/_app.js

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

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

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

export default MyApp;

그 후에 우리는 hookrouter 으로 객체 에 접근해야 합니다 .useRouter

pages/_app.js

import ProgressBar from "@badrap/bar-of-progress";
import { useRouter } from "next/router";

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

const MyApp = ({ Component, pageProps }) => {
  const router = useRouter();

  return <Component {...pageProps} />;
};

export default MyApp;

router객체의 이벤트 를 사용 하여 진행률 표시줄을 제어합니다.

pages/_app.js

import ProgressBar from "@badrap/bar-of-progress";
import { useRouter } from "next/router";
import { useEffect } from 'react';

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

const MyApp = ({ Component, pageProps }) => {
  const router = useRouter();

  useEffect(() => {
    router.events.on("routeChangeStart", progress.start);
    router.events.on("routeChangeComplete", progress.finish);
    router.events.on("routeChangeError", progress.finish);

    return () => {
      router.events.off("routeChangeStart", progress.start);
      router.events.off("routeChangeComplete", progress.finish);
      router.events.off("routeChangeError", progress.finish);
    };
  }, [router]);

  return <Component {...pageProps} />;
};

export default MyApp;

모든 것이 잘 진행되면 페이지 간에 전환하는 동안 사이트 상단에 진행률 표시줄이 표시되어야 합니다.
이 사이트의 경우와 같이 진행률 표시줄이 다른 요소 뒤에 숨겨져 있는 경우가 있습니다.
z-index이 문제를 해결하려면 CSS에서 진행률 표시줄을 늘리기만 하면 됩니다.

Airbnb 만들면서 작성한 코드

import "tailwindcss/tailwind.css";
import "../styles/globals.css";
import Router from "next/router";

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

const progress = new ProgressBar({
  size: 8,
  color: "#FE595E",
  className: "z-50",
  delay: 100,
});

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

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

export default MyApp;

Router.events.on 으로 이벤트가 발생시에 작동하게 설정했다.

참고
badrap/bar-of-progress