Link

NextJS에서도 ReactJS에서 react-router-dom 을 사용하여 페이지를 이동했던 것처럼 할 수 있다.

import Link from "next/link";

NextJS가 가지고있는 특정 컴포넌트를 import 하여 사용 할 수 있다!

사용법

사용법은 다음과 같다.

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

export default function NavBar() {
  const router = useRouter(); // location에 대한 정보를 얻는다.
>   return (
    <nav>
      <Link href="/">
        <a style={{ color: router.pathname === "/" ? "red" : "blue" }}>Home</a>
      </Link>
      <Link href="/about">
        <a style={{ color: router.pathname === "/about" ? "red" : "blue" }}>
          About
        </a>
      </Link>
    </nav>
  );
}

1. Link 를 import 받는다.
2. a 태그를 만들고 Link 컴포넌트로 감싸준다. *
3. 그 다음 이동할 경로를 a 태그가 아니라 Link 컴포넌트에 작성해준다.

잠깐!

Q1. 근데 그냥 a 태그로 페이지 이동하면 안되나요?
A1. 되긴된다.. 근데 별로 추천하지 않는 방법이다.
우선 ESLint가 에디터에 빨간줄을 띄운다.
"님 a 태그로 페이지 이동하지마세요. 대신 next/link 컴포넌트를 사용해보시는건 어떠신가요?" 라는 메시지와 함께.. 그리고 a태그로 이동하면 페이지를 "새로고침" 한다.
React로 페이지 라우팅을 해봤으면 알텐데, 그냥 자연스럽게 슉 슉 바뀌지않던가? Link 컴포넌트를 사용하면 그렇게되고, (이걸 클라이언트 사이드 렌더링? 이라고하던가?)
그냥 a태그를 사용하면... html 로만 간단한 웹 만든 경험은 다들 있을것이다. 그렇게 넘어간다고 생각하면 될듯.. 결론은 Link를 씁시다!

Q2. Link 안에는 a태그만 넣어줘야하나요?
A2. 꼭 그런건 아닌것같다. span 같은 다른태그를 넣어도 작동은한다! 대신 passherf is missing 이라는 경고가 나타난다! 실행시키면 에러는 따로 나지 않는다!

nextjs docs

https://nextjs.org/docs/messages/link-passhref

들어가서 보니깐, Link 를 a태그와 함께 사용하지 않으면 나타나는 현상이라고한다~!!

Link 태그는 a태그랑 짝꿍처럼 쓰는게 메뉴얼인것같다!!