useRouter

client compoent안에서만 쓸 수 있다.

router.push('/')

• 다음 경로로 이동가능

'use client'

import {useRouter} from 'next/navigation'

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

rotuer.back

• 뒤로가기

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

rotuer.forward

• 앞으로가기

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

rotuer.refresh()

• 새로고침
• 페이지를 처음부터 다시 로드하는게 아니라, 이전과 바뀐점을 분석해서
  바뀐부분만 새로고침해준다.
• Next.js 공식문서 명칭으로는 soft refresh 라고함

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

prefetch 기능

• 해당 경로의 내용을 미리 로드해준다.
• 그 페이지 방문할 때 빠르게 방문가능

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

• 서버 컴포넌트에서도 prefetch기능을 쓸 수있음
• ` 태그가 화면에 보이는 순간 '/' 해당 경로 페이지를 자동으로 미리 로드해준다.
• 자동으로 미리 로드하는게 싫으면 prefetch속성을 false로 바꿔주면된다.
• 링크가 많은 게시판의 경우 모든 링크를 미리 로드하는건 자원낭비이므로, false로 해주는게 좋을듯싶다.

<Link href={'/'}>링크</Link> 

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

현재 URL 정보

client component에서 현재 URL에 뭐가 적혀있는지 궁금할때

• usePathname: 현재 URL 출력
• useSearchParams: search parameter (query string) 출력
• useParams() : [dynamic route]에 입력한내용 (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)
}