[Next.js] 네비게이팅 (Navigating)

 

✅ 네비게이팅 (Navigating)

 

일반적인 HTML문서에서 페이지를 이동하고 싶을 때는 a태그를 이용하여 페이지를 이동한다.

 

Next.js의 페이지 이동은 클라이언트 사이드 렌더링 방식으로 이루어지는데

a태그는 서버에게 매번 새로운 페이지를 요청하기 때문에 클라이언트 사이드에서 원하는 페이지 이동 방식이 아니다.

 

따라서, Next.js가 제공하는 Link 컴포넌트를 사용하여 페이지 이동을 구현할 수 있다.

 

// _app.tsx

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

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <header>
        <Link href={"/"}>index</Link>
        <Link href={"/search"}>search</Link>
        <Link href={"/book/1"}>book/1</Link>
      </header>
      <Component {...pageProps} />
    </>
  );
}

 

 

 

만약, Link 컴포넌트를 이용해 페이지를 이동하는 것이 아닌 어떤 함수가 실행되거나

이벤트가 발생했을 때 페이지를 이동시키고 싶다면 router.push()를 사용해서 구현할 수 있다.

// _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("/test");
  };

  return (
    <>
      <header>
        <Link href={"/"}>index</Link> &nbsp;
        <Link href={"/search"}>search</Link> &nbsp;
        <Link href={"/book/1"}>book/1</Link>
        <div>
          <button onClick={onClickButton}>/test 페이지로 이동</button>
        </div>
      </header>
      <Component {...pageProps} />
    </>
  );
}

 

 

 

 

 

참고자료

🔗 [이정환] 한입 크기로 잘라먹는 Next.js(15+)