[Next.js] nextjs-progressbar로 페이지 전환 프로그래스바 구현

 

nextjs-progressbar

NProgress 기반 Next.js 라이브러리인데 사용법이 간단해서 쓰기 좋은 듯. 하지만 커스터마이징 옵션을 많이 제공하지 않는 건 아쉽다.

https://github.com/apal21/nextjs-progressbar

GitHub - apal21/nextjs-progressbar: A simple Next.js progressbar component using NProgress.

 

 

 

사용법

1. npm 설치

npm i nextjs-progressbar

 

2. _app.js에 NextNProgress를 import 한다.

import NextNProgress from 'nextjs-progressbar';

 

3.  import한 NextNProgress를 JSX 요소 내에 넣는다. 끝.

import NextNProgress from 'nextjs-progressbar';

export default function App({ Component, pageProps }) {
    return (
        <>
            <NextNProgress/>
            <Component {...pageProps}/>;
        </>
    );
}

 

 

 

API

<NextNProgress
    color="#29D"
    startPosition={0.3}
    stopDelayMs={200}
    height={3}
    showOnShallow={true}
/>

• color: 프로그래스바 색상. rgb(0, 0, 0)나 rgba(0, 0, 0, 1)도 사용 가능
• startPosition: 프로그래스바를 어디서부터 시작할지 정하는 속성. 0.3 = 30%
• stopDelayMs: 페이지 전환되고 얼마 뒤에 멈출 건지 정하는 속성인 듯?
• height: 프로그래스바 높이. 3 = 3px
• showOnShallow: Shallow Routing 할 때도 전환 효과를 줄 건지 선택하는 속성

 

*Shallow Routing은 getServerSideProps, getStaticProps 메서드를 실행하지 않고 기존 데이터를 유지하면서 URL을 변경하는 라우팅 방식을 말한다.

https://nextjs.org/docs/pages/building-your-application/routing/linking-and-navigating#shallow-routing

Routing: Linking and Navigating | Next.js

 

 

 

커스터마이징

커스텀 CSS

매개 변수로 들어가 있는 css는 기본 설정값이고, 매개 변수를 수정하거나 <style/> 태그 내부에 다른 스타일을 넣어서 스타일을 변경할 수 있다.

<NextNProgress
    transformCSS={(css) => {
        // css is the default css string. You can modify it and return it or return your own css.
        return <style>{css}</style>;
    }}
/>

 

Nprogress 옵션

맨 처음에 NProgress 기반으로 제작됐다고 했었는데 NProgress에서 제공하는 옵션을 JSON 형태로 추가할 수 있다.

<NextNProgress 
    options={{
        easing: 'ease',
        speed: 500,
    }}
/>

 

NProgress 옵션 공식 문서

https://github.com/rstacruz/nprogress#configuration

GitHub - rstacruz/nprogress: For slim progress bars like on YouTube, Medium, etc

 

 

 

결과물

 

 

 

참고

https://github.com/apal21/nextjs-progressbar

GitHub - apal21/nextjs-progressbar: A simple Next.js progressbar component using NProgress.

 

https://nextjs.org/docs/pages/building-your-application/routing/linking-and-navigating#shallow-routing

Routing: Linking and Navigating | Next.js

 

https://github.com/rstacruz/nprogress#configuration

GitHub - rstacruz/nprogress: For slim progress bars like on YouTube, Medium, etc