<a>와 <Link>의 차이점

• <a>는 서버에 새로운 페이지를 요청하므로, 비교적 반응이 느리다.
• <Link>는 클라이언트 사이드에서 페이지 전환을 하기 때문에 빠르고 쾌적하다.

useRouter()

어떤 함수나 조건을 만족했을 때 경로를 이동하는 경우에 쓰인다.

import { useRouter } from "next/router";

export default function() {
	const route = useRouter
	const handleClick = () => {
		route.push("/")  // push 메소드를 통해 이동하려는 경로 작성
	}

	return (
		<button onClick={handleClick}>홈으로</button>
	)
}

아래 코드의 주석 부분은 동일한 기능을 수행하는 것으로 보인다.

//_app.tsx

import "@/styles/globals.css";
import type { AppProps } from "next/app";
import Link from "next/link";
import { useRouter } from "next/router";

export default function App({ Component, pageProps }: AppProps) {

  const router = useRouter()

  const onClickButton = () => {
    router.push("/home")
  };

  return (
    <>
      <header>
        <Link href={"/home"}>	// 홈으로 이동
          Home
        </Link>

        <div>
          <button onClick={onClickButton}>Home</button> // 동일하게 홈으로 이동
        </div>
      </header>

      <Component {...pageProps} />
    </>
  );
}