Menu Nâng Cao trong NextJS

Trong bài học trước, chúng ta đã thảo luận về vấn đề menu từ các liên kết thông thường. NextJS có thể giải quyết vấn đề này và đảm bảo việc chuyển trang theo liên kết không dẫn đến việc tải lại toàn bộ trang. Để tối ưu hóa hiệu suất, chỉ phần thay đổi sẽ được tải qua Ajax.

Để làm điều này, thay vì các thẻ a thông thường, chúng ta sẽ sử dụng một component đặc biệt là Link. Hãy import nó:

import Link from 'next/link';

Hãy chuyển đổi menu của chúng ta thông qua component này:

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

Hãy chuyển đổi menu của bạn thông qua component Link.

Hãy đảm bảo rằng việc chuyển trang theo các liên kết menu bây giờ không dẫn đến việc tải lại trang.