[next.js] Router를 통해 props 기능 구현

1. 우선 props를 보낼 곳에서 Router를 import 합니다.

import Router from 'next/router';

2. button을 이용해 해당 파일 경로와 보내고 싶은 props를 query형태로 보내줍니다.

button의 모양은 대략 이렇게 생겼습니다.

<button onClick={SendQuery}>클릭</button>

SendQuery 함수의 형태입니다.

const greeting = 'hello' 
const SendQuery = () => {
    Router.push({
      pathname: '/register',
      query: { greetingK: '안녕', greetingE: greeting },
    });
  };

3. query를 받는 곳(/pages/register)에 { useRouter }를 import 합니다.

import { useRouter } from 'next/router';

4. register 함수내에서 query를 받아옵니다.

  const router = useRouter();
  console.log('K : ', router.query.greetingK);
  console.log('E : ', router.query.greetingE);

끝났습니다.

버튼을 통해서 페이지 전환과 함께 query를 통해 props와 유사한 기능을 할 수 있음을 알아보았습니다. ^^