네비게이팅

Link 컴포넌트

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

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <h1>Header</h1>
      <Link href={"/"}>Home</Link>
      &nbsp;
      <Link href={"/search"}>search</Link>
      &nbsp;
      <Link href={"/book/1"}>book/1</Link>
      <Component {...pageProps} />;
    </>
  );
}

특정 조건이 만족했을때 페이지 이동

클라이언트 사이드랜더링 이동

• 컴포넌트 내부에서 특정조건이 만족하거나 페이지를 이렇게 이동시킬수 있다.

import { useRouter } from "next/router";
export default function App({ Component, pageProps }: AppProps) {
  const router = useRouter();
  const onClickButton = () => {
    router.push("/test");
  };
  return (
    <>
      <h1>Header</h1>
      <Link href={"/"}>Home</Link>
      &nbsp;
      <Link href={"/search"}>search</Link>
      &nbsp;
      <Link href={"/book/1"}>book/1</Link>
      <div>
        <button onClick={onClickButton}>/test 이동</button>
      </div>
      <Component {...pageProps} />;
    </>
  );
}