[ Compontents ] <Link/>

<Link>는 React 컴포넌트로, HTML <a> 요소를 확장하여 prefetching(사전로드) 및 클라이언트 측에서 라우트 간 탐색을 제공한다. 이는 Next.js에서 라우트 간 탐색을 위한 주요 방법이다.

Next.js 애플리케이션에서 <Link>를 사용하면 클라이언트 측 렌더링 및 탐색을 자동으로 처리한다. 즉, 사용자가 <Link> 컴포넌트를 클릭하면 브라우저 전체 새로고침 없이 페이지 전환이 발생한다. 이로 인해 더 빠르고 원활한 사용자 경험이 가능해진다.

다음은 Next.js에서 <Link> 컴포넌트를 사용하는 예시다.

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

---

Props

<Link/>의 구성 요소는 아래와 같다.

Prop	Example	Type	Required
https://nextjs.org/docs/app/api-reference/components/link#href-required	href="/dashboard"	String or Object	Yes
https://nextjs.org/docs/app/api-reference/components/link#replace	replace={false}	Boolean	-
https://nextjs.org/docs/app/api-reference/components/link#prefetch	prefetch={false}	Boolean	-

<Link>에는 className이나 target="_blank"와 같은 <a> 태그 속성을 props로 추가할 수 있으며, 이러한 속성은 내부의 <a> 요소로 전달된다.

href

이동할 경로 또는 URL이며 필수적인 요소다.

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

href 는 object를 허용한다.

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

replace

기본값은 false다. true로 설정할 경우, next/link는 브라우저의 기록 스택에 새 URL을 추가하는 대신 현재의 기록 상태를 대체한다.

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

prefetch

기본값은 true다. true로 설정할 경우, next/link는 백그라운드에서 페이지(prefetch={false})를 사전로드한다. 이는 클라이언트 측 탐색의 성능을 향상시키는 데 유용하다. 뷰포트에 있는 <Link />(초기에나 스크롤을 통해)는 사전로드된다.

prefetch={false}를 전달하여 사전로드 기능을 비활성화할 수 있다. 사전로드 기능은 프로덕션 환경에서만 활성화된다.

---

예시

동적 라우트 연결

동적 라우트의 경우, 링크의 경로를 생성하기 위해 템플릿 리터럴을 사용하는 것이 편리할 수 있다.

예를 들어, 동적 라우트 `app/blog/[slug]/page.js`에 대한 링크 목록을 생성할 수 있다.

// app/blog/page.js

import Link from 'next/link'
 
function Page({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  )
}

Middleware

인증 또는 사용자를 다른 페이지로 리다이렉션하는 등 다른 목적을 위해 미들웨어를 사용하는 것이 일반적이다. 미들웨어를 와 함께 <Link/> 컴포넌트로 제대로 된 사전로드와 리다이렉트를 하기 위해서는 Next.js에게 표시할 URL과 사전로드할 URL을 모두 알려주어야 한다. 이렇게 하면 미들웨어에 필요한 올바른 경로를 사전로드하기 위해 불필요한 fetch를 방지할 수 있다.

예를 들어, 인증 및 방문자 뷰를 가진 /dashboard 경로를 제공하려는 경우, 다음과 같이 미들웨어에 다음과 유사한 내용을 추가하여 사용자를 올바른 페이지로 리디렉션할 수 있다.

// middleware.js

export function middleware(req) {
  const nextUrl = req.nextUrl
  if (nextUrl.pathname === '/dashboard') {
    if (req.cookies.authToken) {
      return NextResponse.rewrite(new URL('/auth/dashboard', req.url))
    } else {
      return NextResponse.rewrite(new URL('/public/dashboard', req.url))
    }
  }
}

이 경우, 컴포넌트에서 다음 코드를 사용하면 된다.

import Link from 'next/link'
import useIsAuthed from './hooks/useIsAuthed'
 
export default function Page() {
  const isAuthed = useIsAuthed()
  const path = isAuthed ? '/auth/dashboard' : '/dashboard'
  return (
    <Link as="/dashboard" href={path}>
      Dashboard
    </Link>
  )
}

---

[출처]
https://nextjs.org/docs/app/api-reference/components