Next.js - 뒤로가기 할 때 이전 스크롤 위치 유지

_app.tsx

const router = useRouter()

useEffect(() => {
  window.history.scrollRestoration = 'auto'
  
  const cacheScrollPositions: Array<[number, number]> = []
  let shouldScrollRestore : null | {x: number; y: number}
  
  router.events.on('routeChangeStart', () => {
    cacheScrollPositions.push([window.scrollX, window.scrollY])
  })
  
  router.events.on('routeChangeComplete', () => {
    if (shouldScrollRestore) {
      const {x, y} = shouldScrollRestore
      window.scrollTo(x, y)
      shouldScrollRestore = null
    }
    window.history.scrollRestoration = 'auto'
  })
  
  router.beforePopState(() => {
    if (cacheScrollPositions.length > 0) {
      const scrollPosition = cacheScrollPositions.pop()
      if (scrollPosition) {
        shouldScrollRestore = {
          x: scrollPosition[0],
          y: scrollPosition[1]
        }
      }
    }
    window.history.scrollRestoration = 'manual'
    return true
  })
}, [router])

 

원리

1. router 이동 시작 시 cacheScrollPosition 에 현재 window 의 scroll x,y 위치 값 저장

2. pop 되기 전에 가장 위에 있는 값을 가져와서 shouldScrollRestore 에 저장 후

3. router 이동이 완료되면 해당 값으로 스크롤 하는 로직

 

참고

https://coffeeandcakeandnewjeong.tistory.com/94