NextJS에서 고급 메뉴 구현하기

이전 강의에서 우리는 일반 링크로 구성된 메뉴의 문제점에 대해 논의했습니다. NextJS는 이 문제를 해결하고 링크 클릭 시 전체 페이지가 다시 로드되는 것을 방지할 수 있습니다. 성능 최적화를 위해 변경된 부분만 Ajax를 통해 로드됩니다.

이를 위해 일반 앵커 태그 대신 전용 컴포넌트 Link를 사용할 것입니다. 먼저 import 합니다:

import Link from 'next/link';

이제 우리의 메뉴를 이 컴포넌트를 사용하도록 수정해 보겠습니다:

export default function Menu() {
	return <>
		<Link href="/">home</Link>
		<Link href="/about">about</Link>
		<Link href="/price">price</Link>
		<Link href="/contacts">contacts</Link>
	</>;
}

여러분의 메뉴를 Link 컴포넌트를 사용하도록 수정하세요.

이제 메뉴 링크를 클릭해도 페이지가 새로고침되지 않는지 확인하세요.