Next.js 14 시작하기 #10 Link Component Navigation

강의 19~20번

Link Component Navigation

• Next.js 애플리케이션 내에서 다른 라우트(경로)간의 클라이언트 측 내비게이션을 가능하게 하는 Link 컴포넌트에 대한 소개
• 새 페이지를 로드하기 위해 서버에 요청을 보내지 않고, 웹 애플리케이션 내에서 뷰를 변경하는 과정
• React의 Link 컴포넌트를 활용

예시

// app/page.js
import Link from "next/link"

export default function Home() {
  return (
    <>
      <Link href="/blog">Blog</Link>
      <h1>Home Page</h1>
    </>
  )
}

Link의 기본적인 사용법은 위와 같고

이렇게 출력된다. blog버튼을 클릭하면

/blog 경로의 페이지를 출력하게 됨

돌아오는 Link를 만들고 싶다면

// app/blog/page.js
import Link from "next/link"

export const metadata = {
  title: {
    absolute: "Blog"
  }
}

export default function Blog() {
  return (
    <>
      <Link href="/">Home</Link>
      <h1>My blog</h1>
    </>
  )
}

위와 같이 경로를 / 로 해주면 된다
또한 link의 경로를 동적으로 정의 해줄 수도 있는데

// app/product/page.js
import Link from "next/link"

export default function ProductList() {
  const productId = 100
  return(
    <>
      <h1>Product List</h1>
      <h1>Product1</h1>
      <h1>Product2</h1>
      <h1>Product3</h1>
      <h1><Link href={`/product/${productId}`} replace>Product {productId}</Link></h1>
    </>
  )
}

이와 같이 productId의 값을 지역변수로 선언해주고 Link에 넣어주면 해당 변수값(Id)의 링크로 넘어가진다.

replace는 페이지를 넘어갔을 때 바로 이전 방문한 페이지(여기서는 /product)의 히스토리를 대체하여 사용자가 뒤로가기를 했을 때 해당 페이지로 돌아가지 않도록 함, 이는 특정 상황에서 유용하게 작용할 수 있는데, 예를 들어 사용자가 양식을 제출한 후 뒤로 가기를 눌렀을 때 양식 제출 페이지로 돌아가는 것을 방지하고 싶을 때 사용하여 양식을 두번 제출하는 것을 방지할 수 있다

또한 Link는 다양하게 응용될 수 있는데

이와 같이 Link Component에 map을 활용할 수 있고, 출력되는 페이지는

이와 같으며 각 버튼을 클릭 할 경우 버튼은 그대로 남게 되고(layout이므로) 해당 URL에 해당하는 페이지가 출력된다.

또한 이와 같이 usePathname을 사용해서 브라우저의 경로명을 가져와, 활성화된 내비게이션 링크를 가져온 후, active 여부에 따라 css를 적용하는 것도 가능하다.

/* app/(auth)/styles.css */
.button-container *{
  padding: 0 10px;
  text-decoration: none;
}

.red {
  color: red;
  font-weight: bold;
}

.blue {
  color: blue;
  font-weight: lighter;
}