<Link> 컴포넌트

Next.js에서 페이지 이동은 "next/link"의 <Link> 컴포넌트로 합니다. <a> 태그를 대체하는 것인데 <Link>를 사용해야 **CSR**을 할 수 있습니다.

import Link from "next/link";

//생략

const Gnb = () => {
  render() {
    <>
      <Link href="/restaurants">
        <a>맛집 리스트</a>
      </Link>
      <Link href="/signup">
        <a>회원가입</a>
      </Link>
      <Link href="/login">
        <a>
          <button>로그인</button>
        </a>
      </Link>
    </>
  }
}

왜 페이지 이동을 꼭 CSR로 해야 하는지 아시죠?

Router 사용

위와 같이 메뉴바에서 페이지 이동하는 것이 아니라 사용자 이벤트가 일어나고 로직을 판단한 후에 이동해야 한다면 next/router의 Router를 사용합니다.

import Router from 'next/router';

// 생략

const Login = () => {
  const login = () => {

    // 로그인 api 호출 생략

    if (response.success) {
      Router.push('/');
    }
  };

  return <div onClick={login}>로그인</div>
}