Next.js 에서는 <a>
태그를 사용해서 페이지 이동하는 것을 반가워 하지 않습니다.
이유는, 앱 내에서 페이지를 이동 할 때 사용하는 특정 컴포넌트가 존재하기 때문 입니다.
<a>
태그를 사용해서 페이지를 이동하게 되면 애플리케이션은 새로고침이 발생 합니다.가장 먼저 import 를 합니다.
import Link from "next/link";
위의 사진에 있던 코드를 알맞게 바꾸면
import Link from "next/link";
const NavBar = () => {
return (
<nav>
<Link href="/home">
<a>Home</a>
</Link>
<a href="/About">About</a>
</nav>
);
}
export default NavBar;
<Link href="이동할 경로 혹은 URL">
...
</Link>
<Link href="/" as="브라우저의 주소창에 표시될 URL">
...
</Link>
passHref
기본값 : false
<Link href={{ pathname: "post", query: { id: post_id } }} passHref>
<ChildATag>A태그</ChildATag> // 자식태그가 styled component a태그인 경우
</Link>
//참고 : https://f-dever-error-log.tistory.com/56
<Link>
컴포넌트를 이용하면, Viewport에 Link 컴포넌트가 노출되었을때
href 로 연결된 페이지의 chunk를 로드 합니다.
이를 통해 성능을 최적화 합니다.
<a>
tag 만 쓰면 됨<a>
tag 에 줘야 함