<Link> 컴포넌트 사용하기

• Next.js에서는 애플리케이션 안의 다른 페이지로의 이동하기 위한 Link 컴포넌트가 있다.
• Link 컴포넌트를 사용해 페이지를 이동한 경우는, 보통의 페이지 이동과 같이 이동 대상 페이지의 HTML 파일 등을 얻어 화면에 그리는 것이 아니라, 클라이언트 사이드에서 새로운 페이지를 그린다.
• 새로운 페이지를 그리기 위해 필요한 데이터는 미리 비동기 방식으로 얻는다.

import Link from 'next/link'
 
export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>
}

useRouter() Hook 사용하기

• 버튼 컴포넌트를 클릭해서 이동해야 하는 경우와 같이 <Link> 컴포넌트(<a> 태그)를 사용하기 어려운 상황에서는 useRouter를 사용하면 됨
• router 객체의 push 메서드를 통해 페이지를 이동해보자.

import { useRouter } from 'next/router'
 
export default function Page() {
  const router = useRouter()
 
  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  )
}

• router 객체에는 리로드를 수행하는 reload(), 페이지를 돌아가기 위한 back(), 페이지 이동 시작/종료 이벤트를 구독하는 메서드 등이 있음.

const router = useRouter()

// 호출하면 페이지가 리로드 됨
router.reload()

// 호출하면 이전 페이지로 돌아감
router.back()

// 이동 시작 시의 이벤트 구독
router.events.on('routeChangeStart', (url, {shallow}) => {
	// url에는 이동 대상지의 경로를 부여할 수 있다.
	// shallow는 얕은 라우팅(경로만 치환해서 이동)의 경우에는 true가 된다.
})

// 이동 완료 시의 이벤트를 구독한다.
router.events.on('routerChangeComplete', (url, {shallow}) => {
	// url에는 이동 대상지의 경로를 부여할 수 있다.
	// shallow는 얕은 라우팅(결로만 치환해서 이동)의 경우에는 true가 된다.
})

페이지간 데이터 전달하기

• <Link> 컴포넌트와 useRouter() 모두 query 속성을 통해 데이터를 전달할 수 있다.

<Link
    href={{
        pathname: '/user',
        query: {
            name: "문지은"
        },
    }}
>
Go To UserPage
</Link>

router.push({ 
    pathname: '/user', 
    query: { 
        name: '문지은' 
    },
	},
);

• 이렇게 전달된 값은 해당 페이지에서 useRoute를 이용해서 값을 전달받을 수 있다.

const router = useRouter();
console.log(router.query.name) // 문지은

• as 속성을 사용하면 query로 전달된 값을 url에서 숨길 수 있다.

<Link
    href={{
        pathname: '/user',
        query: {
            name: "문지은"
        },
    }}
		as="/user"
>
Go To UserPage
</Link>

• router에서는 as를 생략하고 url만 직접 적어주면 된다.

router.push({ 
    pathname: '/user', 
    query: { 
        name: '문지은' 
    },
		'/user'
	},
);

• as 속성 미사용시
  

• as 속성 사용시
  

• 만약 페이지간에 객체 데이터를 전달해야 하는 경우에는 JSON.stringfy()를 사용해서 해당 객체를 문자열로 변환하여 전달 후 전달받은 값을 다시 JSON.parse()로 변환해주어야 한다.

// 데이터 전달하기

const data = {
	name: "문지은",
  age: 27,
}

<Link
    href={{
        pathname: '/user',
        query: {
            detail: JSON.stringify(data),
        },
    }}
		as="/user"
>
Go To UserPage
</Link>

// 데이터 전달 받기
const router = useRouter();
console.log(JSON.parse(router.query.detail));
/**
{
	name: "문지은",
  age: 27,
}
**/

References

Next.js 공식문서
Next.js, 페이지간 데이터 전달하기