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

nextjs-progressbar

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

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

 

사용법

1. npm 설치

npm i nextjs-progressbar

1. _app.js에 NextNProgress를 import 합니다.

import NextNProgress from 'nextjs-progressbar';

1. 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을 변경하는 라우팅 방식을 말합니다.

Routing: Linking and Navigating | Next.js

 

커스터마이징

커스텀 CSS

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

<NextNProgress
    transformCSS={(css) => {
        return <style>{css}</style>
    }}
/>

Nprogress 옵션

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

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

const options = {
    easing: 'ease',
    speed: 500
}

return (
    <NextNProgress 
        options={options}
    />
)

결과물

 

참고

• GitHub - apal21/nextjs-progressbar
• GitHub - rstacruz/nprogress
• Routing: Linking and Navigating | Next.js