[12주차] Next.js : Routing, useRouter

Next.js 13 부터 변경된 부분 참고하세요

Invalid `<Link>` with `<a>` child

---

Routing

<a> 태그를 html에 넣고 싶다면, next.js 에서는 Link를 써준다.

 

<Link> 컴포넌트는 React의 Next.js에서 클라이언트 사이드 네비게이션을 지원하는 데 사용된다.

이 컴포넌트는 내부적으로 브라우저의 History API를 활용하여 페이지 전환을 처리하며 페이지를 새로 로드하지 않고도 빠르게 전환할 수 있다.

 

반면 <a> 태그를 사용하는 경우에는 전통적인 HTML 방식으로 페이지를 새로고침하면서 전체 페이지를 로드하는 것이 일반적이다. 이로 인해 불필요한 렌더링이 발생할 수 있다.

 

따라서 <Link> 컴포넌트를 사용하면 클라이언트 사이드 네비게이션을 활용하여 빠르게 페이지를 전환할 수 있으며, 페이지 전체를 다시 로드하지 않기 때문에 성능이 향상된다.

 

// components/NavBar.jsx

import Link from "next/link";

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

// pages/about.jsx

import NavBar from "@/components/NavBar";

export default function about() {
  return (
    <div>
      <NavBar />
      <h1>about</h1>
    </div>
  );
}

// pages/index.jsx

import NavBar from "@/components/NavBar";

export default function Home() {
  return (
    <div>
      <NavBar />
      <h1>I am using routing!</h1>
    </div>
  );
}

 

Routing을 위해서는 anchor 를 사용하지 않고 Link를 쓴다!

 

 

 

Link 에 클래스주기

<Link className="hello" href="/">Home</Link>

 

Link 에 조건부 스타일주기

 

목표: url 의 sourcepath 에 따라서 navbar 의 요소에 조건부로 스타일 주기

 

router 객체 접근 방법

useRouter 훅 사용하기

  const router = useRouter();

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

export default function NavBar() {
  const router = useRouter();
  console.log(router);
  return (
    <nav>
      <Link className="hello" href="/">
        Home
      </Link>
      <Link href="/about">About</Link>
    </nav>
  );
}

 

여기서 console.log(router)의 결과를 보면 아래와 같다.

 

만약 router.pathname이 "/"와 같다면 navbar의 Home과 About 이라는 문자열의 색을 빨간색으로 하고, 아니라면 파란색으로 설정하기

import { redirect } from "next/dist/server/api-utils";
import Link from "next/link";
import { useRouter } from "next/router";

export default function NavBar() {
  const router = useRouter();
  console.log(router);
  return (
    <nav>
      <Link
        style={{ color: router.pathname === "/" ? "red" : "blue" }}
        href="/"
      >
        Home
      </Link>
      <Link
        style={{ color: router.pathname === "/about" ? "red" : "blue" }}
        href="/about"
      >
        About
      </Link>
    </nav>
  );
}