[Next.js] Routing 사용 방법

Next.js에서 Rouing 하는 방법에 대해 알아보겠습니다.

a 태그 사용

<a> 태그를 사용해서 페이지 이동을 할 수 있습니다. 하지만 페이지 이동 시 전체 페이지 새고로침이 되는 문제가 발생했습니다.

export default function NavBar() {
  return (
    <nav>
      <a href="/">Home</a>
      <a href="/about">About Us</a>
    </nav>
  );
}

Link 사용

single-page app 환경의 페이지 전환을 하려면 Link 컴포넌트를 사용해야 합니다.

import Link from 'next/link';

export default function NavBar() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About Us</Link>
    </nav>
  );
}

useRouter()

컴포넌트에서 router 객체 내부에 접근하려면 userRouter() hook 을 사용할 수 있습니다.
useRouter는 React Hook입니다. 즉, 클래스와 함께 사용할 수 없습니다. withRouter를 사용하거나 클래스를 함수 컴포넌트로 래핑 할 수 있습니다.

import Link from 'next/link';
import { useRouter } from 'next/router';

export default function NavBar() {
  const router = useRouter();

  return (
    <nav>
      <Link href="/">
        <span style={{ color: router.pathname === '/' ? 'red' : 'blue' }}>Home</span>
      </Link>
      <Link href="/about">
        <span style={{ color: router.pathname === '/about' ? 'red' : 'blue' }}>About Us</span>
      </Link>
    </nav>
  );
}

useRouter() hook 을 사용해서 메뉴의 색상을 변경하는 예제입니다.

참고

• https://nextjs.org/docs/messages/no-html-link-for-pages
• https://nextjs.org/docs/api-reference/next/router#userouter