[Next.js] Next에서 페이지 이동시 데이터 넘기기

1. Link 사용하기

1) 선언하기

import Link from 'next/link'

next.js에서 Link는 아래와 같이 선언하여 사용한다.

2) 사용하기

<Link href={`/projects/${cat}`} legacyBehavior>
              <a>
                #{cat}({categoryCounts[cat]})
              </a>
            </Link>

그리고 Link는 a 태그를 포함하여 사용해준다. Link 태그 안에는 legacyBehavior를 써서 같이 사용해준다.

3) 활용하기

import Link from 'next/link'

//생략
        <Link
          href={{
            pathname: '/about/question/[name]',
            query: { post: JSON.stringify(post) },
          }}
          as={`/about/question/${post.name}`}
        >
          <a>About us</a>
        </Link>

  //생략

export default Home

• href : 실제 URL 주소이다.
• query : query string으로 보내고 싶은 데이터와 함께 보낼 수 있다. 객체 형식으로 해서 보내야 한다.
• as : masking되어 브라우저의 URL 바에 보여질 주소이다.

as는 간단하게 Route Masking 으로 표현할 수 있다.

⚒️주의점

1. 보내고 싶은 data가 Object형태일 경우 string으로 변환을 해주어야 한다. 이를 JSON.stringify를 사용해서 변환할 수 있는데 그러면 URL의 길이가 어마해진다.
2. as로 해서 보내지 않는다면 query로 해서 보낸 데이터가 사용자에게 다 드러난다. 그러면 처치곤란이니 as로 하여 보여질 라우팅을 설정해준다.
3. !https://velog.velcdn.com/images/jma1020/post/ad7040ce-a50c-46d4-8bef-95b173c30446/image.png

2. router 이용

1) 선언하기

import { useRouter } from 'next/router';

export default function Home() {
  const router = useRouter();
}

라우터 객체는 next/router 모듈에서 useRouter 훅을 불러와 사용할 수 있다.

2) 사용 및 활용하기

쿼리 스트링

const { category } = router.query;

router를 활용하여 객체로 구문 분석 된 쿼리 문자열을 가져올 수 있다.

사이트 이동하기

router.push(url, as, options)

• url : 이동할 경로를 말한다.
• as : 브라우저에 표시될 URL이다.
• options
  • scroll - 기본 값은 true. 선택 boolean. 이동 후 페이지를 상단으로 스크롤 제어.
  • shallow - 기본 값은 false. getStaticProps, getServerSideProps 또는 getInitialProps 를 다시 실행하지 않고 현재 페이지의 경로를 업데이트.
  • locale - 선택적 문자열. 새 페이지의 로케일을 나타낸다.

활용1)

import { useRouter } from 'next/router';

export default function Page() {
  const router = useRouter();
  return (
    <button type="button" onClick={() => router.push('/about')}>
      Click me
    </button>
  )

활용2)

import { useRouter } from 'next/router'

export default function ReadMore({ post }) {
  const router = useRouter()

  return (
    <button
      type="button"
      onClick={() => {
        router.push({
          pathname: '/post/[pid]',
          query: { pid: post.id },
          },
		  "/order"
        )
      }}
    >
      Click here to read more
    </button>
  )
}

개인적인 생각)

Link의 경우 별도의 깜박임없이 pages파일에 있는 파일을 띄워주고, url이 변화된다.

router의 경우에는 사이트가 이동됨이 보인다. 깜박임이 존재하고, useEffect로 데이터의 변화를 꾀할 수 있다.

나의 경우 두 가지를 한번에 사용하던가, 아니면 둘 중에 하나만 하는 것을 선호한다. 웬만해서 하나만 사용해서 구현하도록 하자. 두개 다 사용할 필요가 없다.

👇🏻 참고 사이트

https://velog.io/@blackeichi/NextJS-링크-이동-시-query-데이터-전달하기

https://velog.io/@jma1020/Next-NextJS-페이지간-query-데이터-이동방법-Link-nextrouter