Next 에서는 페이지 이동을 해주는 기능이 두가지가 있습니다.
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에서 불리함을 가지게 됩니다.
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 의 동작처럼 보이게 됩니다.