시작하려면 @badrap/bar-of-progress종속성을 설치해야한다.
yarn add @badrap/bar-of-progress
npm i @badrap/bar-of-progress
그런 다음 아직 생성하지 않은 경우 에 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: "z-50",
delay: 100,
});
const MyApp = ({ Component, pageProps }) => {
return <Component {...pageProps} />;
};
export default MyApp;
그 후에 우리는 hookrouter 으로 객체 에 접근해야 합니다 .useRouter
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객체의 이벤트 를 사용 하여 진행률 표시줄을 제어합니다.
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에서 진행률 표시줄을 늘리기만 하면 됩니다.
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 으로 이벤트가 발생시에 작동하게 설정했다.