Next.js에서 페이지 강제 새로고침 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

Next.js 프레임워크를 사용하는 웹 개발자(중간~고급 수준)

핵심 요약

• useRouter 훅 사용: React 컴포넌트 내에서 useRouter를 통해 router.reload()로 페이지 새로고침 가능
• 단일tons Router 사용: 컴포넌트 외부에서 import Router from "next/router"로 Router.reload() 호출 가능
• window.location.pathname 파라미터: 현재 경로를 기반으로 새로고침 대상 지정

섹션별 세부 요약

1. 컴포넌트 내에서 사용법

• useRouter 훅을 통해 router 인스턴스 가져오기
• router.reload(window.location.pathname) 호출로 현재 페이지 강제 새로고침
• useRouter는 Next.js 13 이상 버전에서 지원

2. 컴포넌트 외부에서 사용법

• import Router from "next/router"로 단일tons Router 인스턴스 직접 가져오기
• Router.reload(window.location.pathname)로 페이지 새로고침
• 유틸리티 모듈이나 비동기 작업에서 유용

결론

• 권장사항: 컴포넌트 내부에서는 useRouter, 외부에서는 Router 사용
• 주의사항: window.location.pathname은 현재 URL 경로를 정확히 필요로 하며, 라우팅 이력 관리에 영향을 줄 수 있음
• 실무 팁: 페이지 상태를 즉시 강제로 재로드해야 하는 경우(예: 실시간 데이터 업데이트)에 유용한 기법