Post

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

nextjs-progressbar

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

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

 

사용법

  1. npm 설치
1
npm i nextjs-progressbar
  1. _app.js에 NextNProgress를 import 합니다.
1
import NextNProgress from 'nextjs-progressbar';
  1. import한 NextNProgress를 JSX 요소 내에 넣어 줍니다. 끝.
1
2
3
4
5
6
7
8
9
10
import NextNProgress from 'nextjs-progressbar';

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

 

API

1
2
3
4
5
6
7
<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/> 태그 내부에 다른 스타일을 넣어서 스타일을 변경할 수 있습니다.

1
2
3
4
5
<NextNProgress
    transformCSS={(css) => {
        return <style>{css}</style>
    }}
/>

Nprogress 옵션

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

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

1
2
3
4
5
6
7
8
9
10
const options = {
    easing: 'ease',
    speed: 500
}

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

결과물

결과물

 

참고

This post is licensed under CC BY 4.0 by the author.