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

 

 

Next.js에서 네비게이팅 하는 법을 알아보자!

---

 

 네비게이팅(Navigating) 

 

Next.js에서는 Link 컴포넌트를 통해 페이지를 이동시킬 수 있다.

 

import Link from "next/link" 이런식으로 Link를 import하고, 
<Link href={"/경로"}>text</Link> 형식으로 작성하면 하면 링크가 생기게 된다.

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} />
    </>
  )
}

 

 

 

 Programmatic Navigation (프로그래매틱한 페이지 이동) 

 

함수가 실행되거나, 이벤트가 발생했을 때 페이지 이동 하는 법

사용자가 링크를 클릭했을 때 페이지를 이동시키는 방식이 아니라,
특정 버튼이 클릭이 되었거나, 특정 조건을 만족했을 때 어떤 함수 내에서 페이지를 이동 시키는 것

 

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} />
    </>
  )
}

 

버튼에 onClickButton 함수를 단다.

함수 내부에 페이지를 이동시킬수 있는 로직을 만든다.

useRouter를 import해서 컴포넌트 내부에서 router 객체를 받아오고 ,

함수 내부에서 router의 push 메서드를 호출하고, 인수로는 문자열로 이동하고 싶은 경로(여기서는 "/test")를 명시하면 된다. 

이 방식을 통해서 컴포넌트 내부에서 특정 조건이 만족하면, 함수 내부에서도 페이지를 CSR 방식으로 이동시킬 수 있다.

 

 

참고로 router 객체에는 replace나 back 같은 메서드들도 있다!

* replace: 뒤로 가기를 방지하며 페이지 이동

* back: 페이지를 뒤로 이동