useRouter

useRouter

<Link> 말고 다른 방법으로 페이지 이동을 시킬 수도 있습니다. 

useRouter() 를 사용하면, 자바스크립트 코드로 페이지이동을 시킬 수 있습니다.

다만, use어쩌구 문법들은 client component 안에서만 쓸 수 있다는 것도 알아두어야 합니다.

'use client'

import {useRouter} from 'next/navigation'

export default function DetailLink(){
  let router = useRouter()
  return (
    <button onClick={()=>{ router.push('/') }}>버튼</button>
  )
}

router.push('/어쩌구') 실행하면 /어쩌구 경로로 페이지이동이 가능합니다.

 

router.back() 

router.back() 실행하면 뒤로가기해줍니다.

<button onClick={()=>{ router.back() }}>버튼</button>

 

router.forward()

router.forward() 를 실행하면 앞으로 가기 해줍니다.

<button onClick={()=>{ router.forward() }}>버튼</button>

 

router.refresh()

router.refresh() 를 실행하면, 새로고침해줍니다.

<button onClick={()=>{ router.refresh() }}>버튼</button>

근데 페이지를 처음부터 다시 로드하는 것이 아니라 이전과 바뀐점을 분서개서 바뀐 부분만 새로고침해준다고 합니다.

Next.js 공식문서에서 soft refresh 라고 부릅니다.

 

prefetch 기능

router.prefetch('/어쩌구') 를 실행하면 '/어쩌구' 의 내용을 미리 로드해줍니다.

<button onClick={()=>{ router.prefetch('/어쩌구') }}>버튼</button>

그럼 해당 페이지를 방문할 때 매우 빠르게 방문할 수 있습니다. 빠른 사이트를 만들고 싶을 때 쓸 수 이는 유용한 기능입니다.

 

다행히 server component 에서도 저런 기능을 사용할 수 있는데

<Link href={'/어쩌구'}>링크</Link>

<Link href={'/어쩌구'}> 쓰면 <Link>태그가 화면에 보이는 순간

'/어쩌구' 페이지를 자동으로 미리 로드해줍니다. 

 

자동으로 미리 로드하는 것이 싫다면, prefetch 속성을 false 로 바꿔줍니다.

<Link href={'/어쩌구'} prefetch={false}>링크</Link>

링크가 많은 게시판의 경우 모든 링크를 다 읽는 것이 아닌데 굳이 모든 걸 미리 로드하는 건 자원낭비입니다.

 

 

현재 URL 이 궁금하면

clinet component 에서 현재 URL 이 궁금하다면,

'use client'

import {usePathname, useSearchParams, useParams} from 'next/navigation'

export default function DetailLink(){
  let a = usePathname()
  let b = useSearchParams()
  let c = useParams()
  console.log(a)
}

• usePathname() : 현재 URL 을 출력해주고,
• useSearchParams() : query string 을 출력해주고,
• useParams() : [dynamic route] 에 입력한 내용인 URL 파라미터를 출력해줍니다.