728x90
Next 프로젝트를 작업하던 도중, 페이지를 이동할 때 보통 router.push를 쓰거나, next의 Link를 이용하곤 한다.
사람들이 모르고, 이용을 하는 경우가 있기 때문에 차이점을 알아보고자 한다.
router.push
import Router from 'next/router';
const RouterTest = () => {
const router = Router;
const onClick = () => {
router.push('/page');
}
return (
<button onClick={onClick}> 버튼 <button/>
)
}
router.push의 경우 window.location과 비슷하게 동작한다.
<a>태그가 아니기 때문에, SEO(검색엔진)에 불리하다.
onClick과 같은 이벤트 핸들러와 함께 사용이 된다.
Link
import Link from 'next/link';
export default function Home() {
return (
<Link href="/request">페이지 이동</Link>
);
}
Link 태그는 <a>태그를 생성하기 때문에 웹 사이트가 크롤링되어 SEO에 유리하다는 장점이 있다.
페이지를 다시 로드하지 않고, SPA처럼 보이게 만든다.
<a> 태그에 대해서도 알아보자
순수 HTML요소의 <a>태그는 새 페이지의 URL로 이동시키는 하이퍼링크를 생성한다.
페이지는 완전히 새로고침이 된다.
참고문서
https://nextjs.org/docs/routing/introduction
https://stackoverflow.com/questions/65086108/next-js-link-vs-router-push-vs-a-tag
728x90