[Nextjs] Nextjs + nprogress 구현
Dev/Nextjs
·
2024. 9. 30.
서론Next.js에서 페이지 로딩 시 ProgressBar를 구현하는 방법은 몇 가지가 있지만, 가장 일반적인 방법은 클라이언트 측에서 라우팅이 변경될 때 이를 감지하고 ProgressBar를 보여주는 방식입니다. 이를 위해 Next.js의 Router 이벤트를 활용할 수 있다. 본문1. nprogress 설치먼저, nprogress 라이브러리를 설치합니다. nprogress는 경량화된 progress bar 라이브러리로, 쉽게 페이지 로딩에 적용할 수 있다.npm install nprogress https://www.npmjs.com/package/nprogress nprogressSimple slim progress bars. Latest version: 0.2.0, last published: 10..