Next.js App Router용 페이지 전환 로딩바
npm install @cher1shrxd/loadingNext.js App Router용 페이지 전환 로딩바
``bash`
pnpm add @cher1shrxd/loading
`tsx
// app/layout.tsx
import { LoadingBar } from "@cher1shrxd/loading";
export default function RootLayout({ children }) {
return (
$3
방법 1: useRouter 훅
`tsx
"use client";import { useRouter } from "@cher1shrxd/loading";
export default function Navigation() {
const router = useRouter();
return (
);
}
`방법 2: Link 컴포넌트
`tsx
import { Link } from "@cher1shrxd/loading";export default function Navigation() {
return (
);
}
`API
$3
| Prop | 타입 | 기본값 | 설명 |
|------|------|--------|------|
|
color | string | "#3b82f6" | 로딩바 색상 |$3
Next.js
Link를 감싸서 로딩바를 자동으로 표시합니다.| Prop | 타입 | 필수 | 설명 |
|------|------|------|------|
|
href | string | O | 이동할 URL |
| children | ReactNode | O | 링크 내용 |
| className | string | X | CSS 클래스 |
| onClick | () => void | X | 클릭 핸들러 |`tsx
import { Link } from "@cher1shrxd/loading";
소개
`$3
Next.js
useRouter를 감싸서 로딩바를 자동으로 표시합니다.`typescript
const router = useRouter();router.push("/path"); // 로딩바와 함께 이동
router.replace("/path"); // 로딩바와 함께 교체
router.back(); // 로딩바와 함께 뒤로가기
router.refresh(); // 새로고침 (로딩바 없음)
`$3
Zustand 스토어로 로딩 상태에 직접 접근합니다.
`typescript
import { useLoadingStore } from "@cher1shrxd/loading";const { isLoading, setIsLoading } = useLoadingStore();
// 수동으로 로딩 시작
setIsLoading(true);
// 로딩 종료
setIsLoading(false);
`$3
진행률과 표시 상태에 접근합니다.
`typescript
import { useLoading } from "@cher1shrxd/loading";const { progress, visible } = useLoading();
// progress: 0-100
// visible: boolean
`동작 방식
1.
useRouter().push() 또는 Link 클릭시 isLoading: true 설정
2. 로딩바 애니메이션 시작 (progress 증가)
3. 라우트 변경 완료시 (pathname 변경) progress가 100%로 이동
4. 애니메이션 완료 후 로딩바 페이드아웃Peer Dependencies
-
next >= 13.0.0
- react >= 18.0.0
- react-dom >= 18.0.0
- zustand` >= 4.0.0MIT