[Nextjs] Nextjs 시작하기 - (2) Link 설정하는 법, Navbar 만들기

1. Link 컴포넌트란

React에서의 Link 컴포넌트나 useNavigate처럼 페이지 간의 이동을 CRA 방식으로 부드럽게 전환할 수 있도록 도와주는 태그이다. 'next/link'로부터 import 해온다.

React에서는 react-router-dom 패키지를 따로 설치해야 했지만, nextjs는 편리하게도 자체에 이런 패키지를 내장하고 있다.

 

💡 내부 라우팅을 부드럽게 해주는 용도이기 때문에, 외부 링크로 이동할 때에는 a 태그를 이용하자!

 

Link 설정하는 법

LInk에 이동할 주소, className 등을 작성하면 된다.

target="_blank"와 같이 보통 a 링크에 작성하는 속성이 필요하다면 그대로 Link에 넣으면 된다.

import Link from 'next/link';

function NavBar() {
  return (
    <nav>
      <Link href="/" className='active'>
        Home
      </Link>
      <Link href="/">
        About
      </Link>
   </nav>
  );
}

export default NavBar;

 

Link 스타일링하는 법

nextjs 12버전에서는 Link 컴포넌트 아래에 a 태그를 작성해야 동작했지만, 13 버전부터는 a 태그를 작성하면 안된다.

그런데 이렇게 a 태그 없이 Link 태그만 작성하도록 강제하다보니 Link 태그에 스타일링을 하려고 하면 난감하다.

브라우저를 검사해보면 Link 태그는 사실 a 태그로 보이는데도, css에서 a 태그를 대상으로 스타일링하면 먹히지 않는다.

 

이럴때는 Link 태그에 legacyBehavior 속성을 추가한 다음, Link 아래에 a 태그를 넣는 이전 방식대로 작성해준다.

그러면 이렇게 추가한 a 태그를 css에서 선택하는 식으로 Link를 스타일링 할 수 있다.

import Link from 'next/link';

function NavBar() {
  return (
    <nav>
      <Link href="/" className='active' legacyBehavior>
      	<a>Home</a>
      </Link>
      <Link href="/" legacyBehavior>
        <a>About</a>
      </Link>
   </nav>
  );
}

export default NavBar;

a {
  text-decoration: none;
  color: royalblue;
}

 

2. useRouter로 Navbar에 현재 위치 표시하기

useRouter로 router 객체를 생성한 다음, pathname을 이용해 현재 페이지의 경로를 알아낼 수 있다.

이를 응용해 Navbar에서 현재 페이지와 일치하는 Link에 className을 줘서 색을 다르게 표시할 수 있다.

 

className을 여러개로 주는 방법은 아래 예시에 나온 것 처럼 두 가지가 있다.

1. 백틱 (`)과 ${}을 이용한 템플릿 리터럴로 className 여러 개 표시
2. class들을 배열에 담은 다음, 빈칸을 사이에 두고 join해서 하나의 문자열로 연결하는 방법

import Link from 'next/link';
import styles from './NavBar.module.css';
import { useRouter } from 'next/router';

function NavBar() {
  const router = useRouter();
  return (
    <nav>
      <Link
        href="/"
        className={`${styles.link} ${
          router.pathname === '/' ? styles.active : ''
        }`}
      >
        Home
      </Link>
      <Link
        href="/about"
        className={[
          styles.link,
          router.pathname === '/about' ? styles.active : '',
        ].join(' ')}
      >
        About
      </Link>
    </nav>
  );
}

export default NavBar;