NextJS 블로그 만들기 - Navigation

Header에 Nav 처리를 진행하는 코드를 작성하는데,
Item마다 데스크탑과 모바일에 따라 반응형 처리를 각 코드마다 처리하기 번거로운 부분이 있다고 생각이 들어,
각 Item 별로 하나씩 처리하는 부분을 모듈화로 구조화 시켜보았다.

const NavItem = ({ href, children }: { href: string; children: string }) => {

• href: 메뉴항목의 링크 경로
• children: 컴포넌트 내부에 텍스트 (항목명)

let isActive = usePathname() === href;

isActive라는 활성화 여부 상태를 만들어 주어서, 항목에 특정 스타일을 적용시켜준다.

• usePathname: next/navigation 라이브러리 훅 path를 가져온다.

<li>
  <Link
    href={href}
    className={clsx(
      "relative block px-3 py-2 transition",
      isActive
        ? "text-teal-500 dark:text-teal-400"
        : "hover:text-teal-500 dark:hover:text-teal-400"
    )}
  >
    {children}
    {isActive && (
      <span className="absolute inset-x-1 -bottom-px h-px bg-gradient-to-r from-teal-50/0 dark:from-teal-400/0 dark:via-teal-400/40 dark:to-teal-400/0" />
    )}
  </Link>
</li>

조건부에 따라 활성화 된 주소일 경우 nav에 밑줄을 추가해준다.

• clsx: 조건부 클래스 적용으로 동적으로 추가해주는 라이브러리

const DesktopNavigation = (props: React.ComponentPropsWithRef<"nav">) => {
  return (
    <nav {...props}>
      <ul className="flex rounded-md bg-white/90 px-3 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10">
        <NavItem href="/about">About</NavItem>
        <NavItem href="/articles">Articles</NavItem>
        <NavItem href="/projects">Projects</NavItem>
      </ul>
    </nav>
  );
};

데스크탑 버전 네비게이션에 해당 클래스만 만들어주면 된다.

• 결과물

추후 모바일 버전에 대응하여 별도로 네비게이션 컴포넌트를 작성해주는 형태로 갈 예정이다.