NextJS에서 경로를 변경할 때 로딩 바를 표시하는 방법

4119 단어 routeloadingnextjsnprogress


설정



NextJS에서 경로를 탐색할 때 화면 상단에 표시되는 파란색 로딩 바를 설정하는 방법에 대해 Google에서 올바른 것을 찾으려고 며칠을 보냈습니다. 사용자가 응용 프로그램이 중지되었다고 가정하지 않도록 경로 변경이 발생하고 있음을 나타내기 위해 이 로딩 표시기를 갖는 것이 중요합니다.
이 문서에서는 이미 NextJS 설정이 있다고 가정합니다. 시작하려면 nprogress 라이브러리를 설치해야 합니다.
운영

npm install nprogress


_app.js에서



pages/_app.js 내부에 다음 코드를 추가합니다.

import NProgress from "nprogress"
import Head from "next/head"
import Router from "next/router"

Router.onRouteChangeStart = url => {
  NProgress.start()
}

Router.onRouteChangeComplete = () => NProgress.done()

Router.onRouteChangeError = () => NProgress.done()

export default function MyApp() {
    return (
        <>
            <Head>
               <link
                rel="stylesheet"
                href="https://cdnjs.cloudflare.com/ajax/libs    /nprogress/0.2.0/nprogress.min.css"
          />
             </Head>
              <Component {…pageProps} key={route} />
        </>
      )
}


위에서 next/router 내부에서 사용 가능한 라우터 개체에 액세스하여 확인합니다. onRouteChangeStart 즉 경로 변경이 진행 중인 경우 NProgress가 실행됩니다. 즉 NProgress.start . 경로 변경이 완료되면 즉 onRouteChangeComplete 에서 NProgress 의 done 메소드를 호출합니다. 오류가 있는 경우 동일한 메서드를 호출합니다.
내 응용 프로그램 내에서 nprogress 패키지의 NProgress 스타일시트를 사용하는 데 문제가 있었고 그들이 CDN을 통해 제공하는 스타일시트를 사용했습니다. 스타일시트가 없으면 화면에 아무것도 표시되지 않습니다.
이제 애플리케이션 내의 페이지로 이동하면 화면 상단에 파란색 로딩 바가 표시됩니다.
5978 Problem F [귀속 입문] 미로를 걷다
PL/SQL의 Arraylike 함수

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage