Linking and Navigating

김현학·2023년 9월 30일

NEXT Routing Concepts

목록 보기

4/11

목표

Next 공식 문서의 내용에 따라
<Link> 컴포넌트와 useRouter 훅을 활용하여
원하는 Route Tree의 Segment에 접근하는 방법을 알아보자.

내용

서론

다음 두 가지의 요소의 핵심만 간추려서 정리한다.
자세한 내용은 링크를 참고하자. (<link> | useRouter)

본론

`<Link>`

간단히 말하면 Next 프레임워크에서 사용하는 특별한 <a> 태그이다.
이 컴포넌트를 이용하면 prefetching이 적용되고,
client-side navigation을 지원한다.
(prefetching에 대한 자세한 내용은 링크 참고)

dynamic segment는 build 시점에 결정되지 않는 segment를 뜻하며,
이에 대한 이동에 JavaScript의 백틱(` `) 문법을 활용할 수 있다.
(template literals and interpolation)

client-side navigation을 통해 다양한 방식의 동적 라우팅이 가능해진다.
가령, 현재 경로를 토대로 이동 가능한 페이지를 미리 로드해두는 link의 특성을 활용하여, 어떤 링크가 유효한 경우에만 activate하는 기능도 가능하다.

단, Client Component에서 usePathname() 훅을 사용해야 한다.

app/components/links.tsx

'use client'
import { usePathname } from 'next/navigation'
import Link from 'next/link'
export function Links() {
  const pathname = usePathname()
  return (
    <nav>
      <ul>
        <li>
          <Link className={`link ${pathname === '/' ? 'active' : ''}`} href="/">
            Home
          </Link>
        </li>
        <li>
          <Link
            className={`link ${pathname === '/about' ? 'active' : ''}`}
            href="/about"

            About
          </Link>
        </li>
      </ul>
    </nav>
  )
}

기존 a 태그처럼 특정 id 태그에 대한 화면 전환도 지원한다.

기본적으로 새로운 페이지로 이동할 때는 화면 최상단으로 이동하고,
방문했던 이전/이후 페이지로 이동하면 기존 스크롤 위치를 유지한다.
이 방식의 채택 여부도 다음과 같이 토글할 수 있다.

useRouter

페이지에 렌더링된 태그를 클릭하는 방식의 기존 navigation이 아닌,
프로그램적 방식의 navigation은 Client Component에서만 가능하다.
이 때, useRouter 훅을 사용하면 된다.

자세한 내용은 링크를 참고하면 된다.
사용 가능한 메소드는 다음과 같다.

push: browser의 history 스택에 새로운 entry를 추가한다.
replace: push와는 달리 추가하지 않는다.
refresh: Clinet Component에 대한 영향 없이, server에 대한 새로운 요청 결과를 토대로 Server Component만 새로고침한다.
prefetch: client-side transition에 대해서는 자동 prefetch가 적용되지 않는다. 따라서 이 기능을 통해 수동으로 prefetch를 수행할 수 있다.
back: browser의 history 스택을 기준으로 뒤로 가기,
forward: 앞으로 가기 를 수행한다.