Next.js에 nProgress 입히기

Next.js - nProgress

 

요즘 원티드에서 진행하는 프리온보딩 챌린지를 통해 프론트엔드 스킬과 현업에서의 고충, 노하우를 얻어가는 계기가 되었습니다. 오늘은 강의 내용 중 nProgress라는 효과를 처음 알게 되었고 Next.js에서 라이브러리를 통해 구현해 보았습니다.

 

nProgress 란?

---

Preview

 

Next.js 에서 페이지를 이동하는 움짤을 만들어봤습니다. 페이지를 이동할 때마다 상단에 프로그래스 바가 생겼다 사라지는데요. 일종에 서버의 응답을 기다릴 때 보여주는 스피너와 동일합니다. 확실히 로딩 스피너 보다 nProgress 가 더 깔끔한 느낌이라 호감이 갑니다.

 

코드 샌드박스 임베드 코드 넣어서 바로 보여드리려 했는데, 이제 무료에서는 기능을 제공하지 않는 거 같습니다. 아래 링크에서 테스트해 볼 수 있습니다.

 

wonderful-babycat-06knxj

 

nProgress 설치

---

> yarn add nprogress
> yarn add -D @types/nprogress

 

Next.js에서 nProgress 구현

---

확장 컴포넌트 WithNProgress.tsx를 작성해 nProgress를 구현해 보도록 하겠습니다. 

 

// .pages/_app.tsx

import type { AppProps } from 'next/app'
import WithNProgress from '../src/hoc/withNProgress'
import 'nprogress/nprogress.css' // <-- css 적용

const MyApp = ({ Component, pageProps }: AppProps) => {
  return (
    <>
      <WithNProgress>
        <Component {...pageProps} />
      </WithNProgress>
    </>
  )
}

export default MyApp

 

상위 컴포넌트에서 <WithNProgress /> 컴포넌트로 감싸주는데, 아직 코드를 작성하지 않았네요.

 

// .src/hoc/withNProgress.tsx

import { useRouter } from 'next/router'
import NProgress from 'nprogress'
import { ReactNode, useEffect } from 'react'

const options = {
  speed: 350,
  height: '5px',
  showSpinner: false,
  color: 'red',
}

NProgress.configure({ speed: options.speed, showSpinner: options.showSpinner })

const WithNProgress = ({ children }: { children: ReactNode }) => {
  const router = useRouter()
  const handleStart = () => {
    NProgress.start()
  }
  const handleStop = () => {
    NProgress.done()
  }

  useEffect(() => {
    router.events.on('routeChangeStart', handleStart)
    router.events.on('routeChangeComplete', handleStop)
    router.events.on('routeChangeError', handleStop)
    return () => {
      router.events.off('routeChangeStart', handleStart)
      router.events.off('routeChangeComplete', handleStop)
      router.events.off('routeChangeError', handleStop)
    }
  }, [])

  return (
    <>
      <style jsx global>
        {`
          #nprogress .bar {
            background: ${options.color};
            height: ${options.height};
          }
        `}
      </style>
      {children}
    </>
  )
}

export default WithNProgress

 

NProgress.configure() 함수로 기본 설정을 적용하고 NProgress.start(), done() 함수가 메인입니다. 라우팅 시작과 완료 시기에 해당 함수를 실행시켜 nProgress 효과를 내줍니다.

 

 

다른 라이브러리도 있으니 참고 링크 남겨놓겠습니다.

 

GitHub - beeinger/next-progress: NextJS NProgress implementation