[Next.Js] Navigation / usePathname

Link 태그는 클라이언트 사이드 네비게이션을 제공해준다.

 

import Link from "next/link";

export default function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <Link href="/">Home</Link>
        </li>
        <li>
          <Link href="/about-us">About Us</Link>
        </li>
      </ul>
    </nav>
  );
}

 

import Navigation from "../components/navigation";

export default function Page() {
  return (
    <div>
      <Navigation />
      <h1>Hello!</h1>
    </div>
  );
}

 

 

---

 

usePathname을 통해 현재 path에 해당하는 페이지 표시를 해줄 것이다

import { usePathname } from "next/navigation";

export default function Navigation() {
  const path = usePathname();
  console.log(path);

 

 

에러가 발생하였다.

 

 

usePathname 이라는 메서드를 사용하여 콘솔에 찍어보면 위와 같이 에러가 뜨는 것을 볼 수 있다.

usePathname은 오직 client components에서만 작동하고 use client를 상단에 추가하라고 한다.

( use client에 대한 정리는 추후에 새로운 글로 작성할 것이다. )

 

 

수정했더니 에러가 사라지고, console.log도 정상적으로 작동되는 것을 볼 수 있었다.

 

 

 

<Link href="/">Home</Link>
{path === "/" ? "🔥" : ""}


<Link href="/about-us">About Us</Link>
{path === "/about-us" ? "🔥" : ""}

 

path 가 '/' 일 때는 🔥, 아니면 빈 값

'/about-us'일 때는 🔥 , 아니면 빈 값

 

 

 

 

---