Nextjs Link

 

import Link from "next/link";

const Test1 = () => {
	return (
		<p>
			Test1
		</p>
	);
}

const App1 = () => {
	return (
		<div>
			<p>
				Test Link1
			</p>
			<a href="/">
				<p>
					AnkerType
				</p>
			</a>
			<Link href="/">
				<p>
					LinkType
				</p>
			</Link>
			<Link href="http://naver.com">
				<Test1 />
			</Link>
		</div>
	);
}

export default App1;

 

실행화면

 

Link방식은 a tag방식과 달리 url이동시 전체를 다시 불러오지 않기에 화면전환이 빠르다.

백그라운드에서 페이지를 미리가져오는 기능이 기본적으로 작동된다(끌수 있다).

브라우저의 HistoryApi를 사용하기에 뒤로가기를 하면 이전에 렌더링된 화면을 보여주는 방식이다.

SEO(검색엔진)에는 a tag방식 보다 불리하다.

React component에 라우팅 기능을 주고싶다면 a tag를 사용해야 한다.