NEXT.JS : Navigation

💡노마드코더 니꼬쌤의 강의를 보며 공부하는 시리즈입니다.

LINK

리액트와 마찬가지로 넥스트에서도 a태그를 사용하지 않는 대신 LINK라는 컴포넌트를 사용할 수 있다.👉🏻NEXT.JS공식문서
프로젝트 최상단 루트에 component라는 폴더를 생성하고, 그 안에 Navigation.tsx를 넣어준다.Navigation.tsx파일에 Link를 import하고 UI를 만들어 주었다.

import Link from 'next/link'

COMPONENT IMPORT

Navigation.tsx를 사용하기 위해서는 app폴더의 page.tsx와 경로폴더인 about폴더의 page.tsx파일에 import해야한다.결과
멋지게 작동하는 것을 볼 수 있지만 컴포넌트를 반복적으로 복사 붙여넣기를 하고 있기 때문에 좋은 방법은 아니다.

usePathname

usePathname
user가 현재 머물고 있는 url을 알려주는 Hook.

Navigation.tsx에 usePathname을 import하고, console로 path를 찍어본다.

대충 "use client"를 파일 최상단에 둬야한다는 말 같다. 안내하는 대로 "use client"를 사용해본다.

'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

에러가 사라지고 콘솔엔 path가 찍혀있다.
path에 따라서 nav옆에 🔥아이콘을 보여지게 해보았다.

'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

export default function Navigation() {
  const path = usePathname();
  return (
    <nav>
      <ul>
        <li>
          <Link href="/">Home</Link>
          {path === '/' ? '🔥' : ''}
        </li>
        <li>
          <Link href="/about">About</Link>
          {path === '/about' ? '🔥' : ''}
        </li>
      </ul>
    </nav>
  );
}

결과

BOOYAH!