Next.js는 “next/link"에서 import한 <Link> 컴포넌트를 사용해야 **CSR**을 할 수 있습니다. 보통 메뉴바에서 페이지 이동할 때 자주 쓰인다. ex) 단순히 클릭하여 이동하는 상황
[코드]
import Link from "next/link";
const Gnb = () => {
render() {
<>
<Link href="/detail">
<a>상세페이지</a>
</Link>
<Link href="/product">
<a>제품 리스트</a>
</Link>
</>
}
}
단순한 기능이 아니라 사용자 이벤트가 일어나고 로직을 판단한 후에 이동하는 거라면 Router 를 사용한다. ex) setTimeOut을 설정하여 페이지를이동하는 상황
import Router from 'next/router';
const ItemList = () => {
const login = () => {
...
if (response.success) {
Router.push('/');
}
};
return <div onClick={login}>로그인</div>
}