[Next.js] Link and Navigate

📢 Next.js 공식문서를 보고 정리한 내용입니다.

01. Link 요소

---

• <Link>는 HTML <a> 태그를 확장하여 경로 간 프리패칭 및 클라이언트 측 탐색을 제공하는 기본 컴포넌트이다.
• Next.js에서 경로 간 탐색하는 기본적이고 권장되는 방법이다.

import Link from 'next/link'
 
export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>
}

다음과 같이 next/link를 import하고 컴포넌트에서 href 프로퍼티를 전달해 사용할 수 있다.

✏️ Link 요소의 optional Props

Props	Description	Type	Required
href	이동할 경로(URL)	string or Object	O
replace	새 URL을 현재 기록상태로 대체	Boolean	X
scroll	스크롤 위치 유지	Boolean	X
prefetch	경로와 해당데이터를 미리 가져와 로드	Boolean or null	X

① href

// string
<Link href="/dashboard">Dashboard</Link> 

// object - Navigate to /about?name=test
<Link
  href={{
    pathname: '/about',
    query: { name: 'test' },
  }}
>
  About
</Link>

② replace

• 기본값 false
• true인 경우 브라우저의 기록 스택에 새 URL을 추가하는 대신, 현재 기록 상태를 대체한다.

import Link from 'next/link'
 
export default function Page() {
  return (
    <Link href="/dashboard" replace>
      Dashboard
    </Link>
  )
}

③ scroll

• 기본값은 true로, 새 경로의 상단으로 스크롤하거나 앞뒤로 탐색할 때 스크롤 위치를 유지한다.
• false로 설정할 경우, 링크 이동 시 페이지 상단으로 스크롤 되지 않는다.

import Link from 'next/link'
 
export default function Page() {
  return (
    <Link href="/dashboard" scroll={false}>
      Dashboard
    </Link>
  )
}

💡 탐색 시 페이지가 뷰포트(vh)에 표시되지 않으면, Next.js가 페이지로 스크롤된다.

④ prefetch

• 프리패칭은 Link 컴포넌트가 사용자의 뷰포트에 들어올 때(처음 또는 스크롤을 통해) 발생한다.

• Next.js는 클라이언트 측 탐색의 성능을 향상시키기 위해 링크된 경로(href)와 해당 데이터를 백그라운드에서 미리 가져와 로드합니다.

  💡 주의할 점은, 프리패칭은 프로덕션 환경에서만 활성화된다.

• 기본값은 null이다.

• 프리패치 동작은 경로가 정적인지, 동적인지에 따라 달라진다.
  - 정적경로인 경우 : 전체 경로가 프리패치된다 (모든 데이터 포함)
  - 동적경로인 경우 : loading.js 경계가 있는 가장 가까운 세그먼트(폴더)까지의 부분 경로가 프리패치된다.

import Link from 'next/link'
 
export default function Page() {
  return (
    <Link href="/dashboard" prefetch={false}>
      Dashboard
    </Link>
  )
}

값	Description
null	정적 경로일 경우, 모든 데이터를 포함해 전체 경로가 프리패치된다. 동적 경로인 경우, loading.js 에 가장 가까운 세그먼트까지 부분 경로가 프리패치된다.
true	정적 경로와 동적 경로 모두에 대해 전체 경로가 프리패치된다.
false	뷰포트에 들어갈 때와 마우스오버할 때 모두 프리패칭이 수행되지 않는다

02. useRouter()

---

• useRouter hook을 사용하면 클라이언트 컴포넌트에서 경로를 변경할 수 있다.

'use client'
 
import { useRouter } from 'next/navigation'
 
export default function Page() {
  const router = useRouter()
 
  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  )
}

📢 Next.js
"사용 라우터 사용에 대한 특별한 요구 사항이 없는한, useRouter보단 Link 요소를 사용해 경로 이동을 하는 것을 권장한다."
→ useRouter의 경우 use가 붙은 만큼, 사용이 클라이언트 컴포넌트로 제한되기 때문이다.

✏️ UseRouter Native History API

• Next.js에서는 window.history.pushState 및 window.history.replaceState 메서드를 사용해 페이지를 다시 로드하지 않고도 브라우저의 기록 스택을 업데이트할 수 있다.
• 또한 pushState 및 replaceState 호출은 Next.js 라우터에 통합되어 사용 경로의 이름 및 사용 검색 매개 변수와 동기화할 수 있다.

❶ window.history.pushState

• window.history.pushState를 사용하면 브라우저의 기록 스택에 새 항목을 추가할 수 있다. 추가 action이기 때문에 사용자가 뒤로가기 버튼을 누르면 이전 상태로 돌아간다.

ex) 상품 정렬하기(오름차순/내림차순)

'use client'
 
import { useSearchParams } from 'next/navigation'
 
export default function SortProducts() {
  const searchParams = useSearchParams()
 
  function updateSorting(sortOrder: string) {
    const params = new URLSearchParams(searchParams.toString())
    params.set('sort', sortOrder)
    window.history.pushState(null, '', `?${params.toString()}`)
  }
 
  return (
    <>
      <button onClick={() => updateSorting('asc')}>Sort Ascending</button>
      <button onClick={() => updateSorting('desc')}>Sort Descending</button>
    </>
  )
}

❷ window.history.replaceState

• 브라우저의 기록 스택에서 현재 URL로 추가가 아닌 바꾸고 싶을 때사용한다. 그럼 사용자는 뒤로가기 버튼을 눌러도 이전 상태로 돌아갈 수 없다.

ex) app의 locale 전환하기

'use client'
 
import { usePathname } from 'next/navigation'
 
export function LocaleSwitcher() {
  const pathname = usePathname()
 
  function switchLocale(locale: string) {
    // e.g. '/en/about' or '/fr/contact'
    const newPath = `/${locale}${pathname}`
    window.history.replaceState(null, '', newPath)
  }
 
  return (
    <>
      <button onClick={() => switchLocale('en')}>English</button>
      <button onClick={() => switchLocale('fr')}>French</button>
    </>
  )
}

03. redirect

---

• 서버 컴포넌트에선 useRouter를 사용할 수 없기 때문에 redirect을 이용해 router.push혹은 router.replace를 대신해 사용할 수 있다.

import { redirect } from 'next/navigation'
 
async function fetchTeam(id: string) {
  const res = await fetch('https://...')
  if (!res.ok) return undefined
  return res.json()
}
 
export default async function Profile({ params }: { params: { id: string } }) {
  const team = await fetchTeam(params.id)
  if (!team) {
    redirect('/login')
  }
 
  // ...
}

① redirect 사용 시 주의할 점

1. redirect는 내부적으로 오류를 발생시키므로, try-catch 문 외부에서 호출해야 한다.
2. redirect는 렌더링 프로세스 중 클라이언트 컴포넌트에서 호출할 수 있지만, 이벤트 핸들러에서는 호출할 수 없다. 이때엔 useRouter hook을 사용한다.
3. redirect는 절대 URL도 허용하며 외부 링크도 리디렉션하는데 사용할 수 있다.
4. 렌더링 프로세스 전에 리디렉션을 하고 싶다면, next.config.js 또는 미들웨어를 사용하면 된다.

② redirect의 Type

기본적으로 리디렉션은 서버 작업에서는 push(브라우저 기록 스택에 새 항목 추가)를 사용하고, 그 외에는 replace(현재 URL을 브라우저 기록 스택으로 바꾸기)를 사용한다.
이때 type 의 매개변수를 지정해 push/replace로 정의할 수 있다.

parameter	default value	description
push	server action의 기본값	브라우저 기록 스택에 새 항목 추가
replace	그 외 기본 값	현재 URL을 브라우저 기록 스택으로 바꾸기

❶ Server Component

• redirect() 함수를 호출하면 NEXT_REDIREACT 오류가 발생하고, 해당 오류가 발생한 세그먼트의 렌더링이 종료된다.
• 이때 redirect() 함수는 타임스크립트의 never타입으로 반환 타입을 사용하지 않는다.

import { redirect } from 'next/navigation'
 
async function fetchTeam(id) {
  const res = await fetch('https://...')
  if (!res.ok) return undefined
  return res.json()
}
 
export default async function Profile({ params }) {
  const team = await fetchTeam(params.id)
  if (!team) {
    redirect('/login')
  }
 
  // ...
}

❷ Client Component

• redirect() 함수는 Server action을 통해 클라이언트 컴포넌트에서도 사용할 수 있다.
• 대표적으로 이벤트 핸들러를 사용해 사용자를 리디렉션해야 경우, useRouter hook을 사용할 수 있다.
  app/client-redirect.tsx

'use client'
 
import { navigate } from './actions'
 
export function ClientRedirect() {
  return (
    <form action={navigate}>
      <input type="text" name="id" />
      <button>Submit</button>
    </form>
  )
}

app/actions.ts

'use server'
 
import { redirect } from 'next/navigation'
 
export async function navigate(data: FormData) {
  redirect(`/posts/${data.get('id')}`)
}