NextJS 링크 이동 시 query 데이터 전달하기

Next에서 페이지를 이동하는 방법은 보통 두 가지로 나뉜다.
하나는 Link를 이용한 방법, 하나는 router를 이용한 방법이다.

또한 Link와 router를 이용한 페이지 이동 시, query데이터를 넘겨줄 수도 있다!

사용방법을 다음과 같이 알아보자.

1. useRouter 📌

useRouter는 기본적으로 다음과 같이 사용한다.

import { useRouter } from 'next/router'

const handleClick = (e) => {
  e.preventDefault()
  router.push(href)
}
return (
    <a href={href} onClick={handleClick}>
      {children}
    </a>
  )
}

다음은 router의 Object이다.

• asPath - string - basePath 또는 locale 없이 브라우저에 표시되는 경로 (쿼리포함)
• basePath - string - 활성 basePath (활성화 된 경우)
• defaultLocale - string - 현재 기본 locale (활성화 된 경우)
• isFallback - boolean - 현재 페이지가 fallback 모드인지 여부
• isPreview - boolean - 앱이 현재 미리보기 모드인지 여부
• isReady - boolean - 라우터 필드가 클라이언트 측에서 업데이트되고 사용할 준비가 되었는지 여부. useEffect 메소드 내에서만 사용해야하며 서버에서 조건부로 렌더링 하는 데에 사용해야한다.
• locale - string - 활성 로케일 (활성화 된 경우)
• locales - string[] - 지원되는 모든 로케일 (활성화 된 경우)
• pathname - string - 현재 경로. 이는 /pages 의 페이지 경로이며(파일명) 구성된 basePath 또는 locale 은 포함되지 않는다.
• query - object - 객체로 구문 분석 된 쿼리 문자열. 페이지에 데이터 가져오기 요구사항이 없는 경우 사전 렌더링 중에 빈 객체가 된다. 기본값은 {}
  ⇒ 동적 라우팅 사용시 쿼리값이 객체로 들어감.

이제 router.push를 이용하여, 페이지의 이동을 시켜보자.
query데이터를 넘기며 페이지 이동하는 방법은 다음과 같다.

import { useRouter } from "next/router";

export default function Home() {
  const router = useRouter();
  const onClick = (id, title) => {
    router.push(
      {
        pathname: `/movies/${id}`,
        query: {
          title,
        },
      },
      `/movies/${id}`
    );
  };
  return (
      <div
        onClick={() => onClick(movie.id, movie.original_title)}
        className="movie"
        key={movie.id}
      >
    ......

2. Link 📌

Next에서는 Link를 통하여 페이지이동도 가능한데, 다음과 같은 props를 가지고 있다.

• href - 이동할 경로 혹은 URL. 유일한 필수 prop. (필수이기 때문에 href를 안 적으면 에러난다)
• as - 브라우저 URL 표시 줄에 표시 될 경로에 대한 선택적 데코레이터. Next.js 9.5.3 이전에는 동적 경로에 사용되었으므로 이전 문서 에서 작동 방식을 확인하길 바란다.
• passHref - href property를 Link 자식에게 강제로 전달하게 한다. 기본값은 false.
• prefetch - 백그라운드에서 페이지를 미리 가져온다. 기본값은 true. 뷰 포트에 있는 모든 항목(초기에 혹은 스크롤을 통해)이 미리 로드 된다. * prefetch={false}를 통해 프리페치를 비활성화할 수 있다. 정적 생성을 사용하는 페이지는 더 빠른 페이지 전환을 위해 데이터가 포함된 JSON파일을 미리 로드한다.
• replace - history 스택(방문 기록)에 새 url을 추가하는 대신 현재 상태를 변경한다. 기본값은 false
• scroll - 페이지 전환 후 페이지 상단으로 스크롤할지 여부. 기본값은 true.
• shallow - getStaticProps, getServerSideProps, getInitialProps을 다시 실행하지 않고 현재 경로를 업데이트. 기본값은 false.

Link의 기본적인 사용법은 다음과 같다

import Link from 'next/link'

const Home = () =>{
	return (
    	<Link href={"/enter"}>
        	<h1>href에 이동할 주소를 입력!</h1>
    	</Link>
    )
}

그리고 query를 함께 전달하는 방법은 다음과 같다.

<Link
  href={{
    pathname: `/movies/${movie.id}`,
    query: {
      title: movie.original_title,
    },
  }}
  as={`/movies/${movie.id}`}
  //as를 사용하지 않으면 query내용이 url에 나타난다.
  //ex) ~~/movies/:id?title="영화타이틀" --> ~~/movies/:id 가 된다.
  //url imgpath도 포함하면 유저가 detail에 들어갔을 때, 이미지도 빨리 볼 수 있다.
>
  <a>{movie.original_title}</a>
</Link>;

이제 이동한 페이지에서 query를 확인해보면 잘 작동하는 것을 확인할 수 있다.

  const router = useRouter();
  console.log(router.query);

REFERENCE

jma1020님의 velog - [Next] NextJS 페이지간 query 데이터 이동방법
NextJS Docs