Nextjs-toploader란?
Next.js 애플리케이션에서 페이지 전환 시 상단에 로드 애니메이션(Top Loading Bar)를 표시하는 간단한 패키지
설치 방법
npm install nextjs-toploader
# 또는
yarn add nextjs-toploader사용법
_layout.tsx_
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={"antialiased"}>
<NextTopLoader color="#334155" showSpinner={true} height={3} />
<Header />
<FullScreenContainer>{children}</FullScreenContainer>
</body>
</html>
);
}- color: 로딩 바의 색상을 지정
- showSpinner: 로딩 시 스피너(작은 원형 로딩 아이콘)를 표시할지 여부 (기본값은 false)
- height: 로딩 바의 높이를 픽셀 단위로 설정 (기본값은 4px)
Hook과의 호환성
useRouter 훅을 통한 페이지 라우팅 시에도 해당 로더를 사용할 수 있다.
import { useRouter } from "nextjs-toploader/app";
const router = useRouter();
const handleDelete = () => {
setIsOpen(false);
router.push("/");
};
기본 구성
props가 전달되지 않으면 아래와 같은 기본 구성이 적용된다고 한다.
<NextTopLoader
color = "#2299DD"
initialPosition = { 0.08 }
crawlSpeed = { 200 }
height = { 3 }
crawl = { true }
showSpinner = { true }
easing = "ease"
speed = { 200 }
shadow = "0 0 10px #2299DD,0 0 5px #2299DD"
template = '<div class="bar" role="bar"><div class="peg"></div></div>
<div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
zIndex = { 1600 }
showAtBottom = { false }
/>- color: TopLoader의 기본 색상을 변경
- initialPosition: TopLoader의 초기 위치를 백분율로 변경
ex)0.08 = 8%. - crawlSpeed: 지연 속도를 증가
- speed: TopLoader의 애니메이션 속도
- easing: easing(CSS easing 문자열)을 사용한 애니메이션 설정
- height: TopLoader의 높이
- crawl: TopLoader에 대한 자동 증가 동작
- showSpinner: 스피너를 보여줄지 여부
- shadow: TopLoader에 대한 부드러운 그림자 (비활성화 하려면 false 설정 필요)
- template: TopLoader에 대한 사용자 정의 HTML 속성을 포함
- zIndex: TopLoader에 대한 zIndex를 정의
- showAtBottom: TopLoader를 하단에 표시 (모바일 기기에서 TopLoader가 보이도록 높일 수도 있음)
🐥집요함과 꾸준함🪽