เมนูขั้นสูงใน NextJS

ในบทเรียนที่ผ่านมาเราได้พูดถึง ปัญหาเกี่ยวกับเมนูที่ใช้ลิงก์ธรรมดา NextJS สามารถแก้ไขปัญหานี้ได้ และทำให้การคลิกลิงก์ ไม่นำไปสู่การโหลดหน้าเว็บใหม่ ทั้งหน้า เพื่อเพิ่มประสิทธิภาพ การทำงานผ่าน Ajax จะ โหลดเฉพาะส่วนที่เปลี่ยนแปลงเท่านั้น

เพื่อการนี้ แทนที่จะใช้ลิงก์ เราจะ ใช้คอมโพเนนต์พิเศษ Link นำเข้า:

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

ตรวจสอบให้แน่ใจว่าการคลิกลิงก์เมนู ตอนนี้ไม่ทำให้ หน้าเว็บโหลดใหม่