Προχωρημένο Μενού στο 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.

Βεβαιωθείτε ότι η πλοήγηση μέσω των συνδέσμων του μενού δεν οδηγεί πλέον σε επαναφόρτωση της σελίδας.