Next 에서는 페이지 이동을 해주는 기능이 두가지가 있습니다.

1. Route

import { useRouter } from 'next/router'

const Home = () => {

const router = useRouter();

return (
	<button onClick={() => {router.push('/login')}}>go to login page<div />
)};

route는 위 코드 형태로 사용할수 있습니다. onClick같은 이벤트 핸들러와 사용하며,

route는 <a>태그를 만들어 사용하지 않기때문에 SEO에서 불리함을 가지게 됩니다.

2. Link

import Link from 'next/link';

const Home = () => {

const router = useRouter();

return (
	<Link href='/login'>
		<button>go to login page</button>
	</Link>
)};

Next의 Link 태그는 원래 하위에 <a>태그를 사용하여야 했지만 최신 버전 부터는 <a>태그를 생략하여

사용할수 있습니다. 또한 Link는 웹사이트가 크롤링이 되기 때문에 SEO에서 유리함을 갖게되며,

페이지를 다시 로드하지 않고 SPA 의 동작처럼 보이게 됩니다.

❗결론적으로 <Link> 를 사용하는것이 좋으며, SEO 에 상관없을 경우에는 Route를 사용하면 될거 같습니다.