Next.js 12 - Routing

Next.js 12

 

⚫ Next.js에서의 <Link> 사용법

---

- React에서 사용했던 방법과는 약간 다르다.

  <Link> 태그 내에 <a>를 또 써줘야 한다. (href는 <Link>에 넣어준다)

 

- <a> 없이도 사용이 가능하나, <Link>만 사용한다면 style, className 같은 attribute를 <Link>에 줄 수 없다.

  그래서 <a>도 같이 써주는 것이 좋아 보인다.

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

export default function NavBar() {
  const router = useRouter();
  console.log(router);
  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>
  );
}

 

⚫ useRouter()

---

- router와 연결할 수 있도록 해주는 Next.js에서 제공해주는 hook.

  location에 관련된 많은 속성들이 있다. ex) router.pathname