Προχωρημένο Μενού στο NextJS

Στο προηγούμενο μάθημα συζητήσαμε το πρόβλημα του μενού από συνηθισμένους συνδέσμους. Το NextJS μπορεί να λύσει αυτό το πρόβλημα και να κάνει έτσι ώστε η πλοήγηση μέσω συνδέσμου να μην οδηγεί σε επαναφόρτωση ολόκληρης της σελίδας. Για βελτιστοποίηση της απόδοσης μέσω Ajax θα φορτώνεται μόνο το τμήμα που άλλαξε.

Για αυτό αντί για συνδέσμους θα χρησιμοποιήσουμε ένα ειδικό στοιχείο Link. Ας το εισάγουμε:

/src/comps/menu/menu.jsximport Link from 'next/link';

Ας μετατρέψουμε το μενού μας μέσω αυτού του στοιχείου:

/src/comps/menu/menu.jsxexport default function Menu() {
  return <>
    <Link href="/">home</Link>
    <Link href="/about">about</Link>
    <Link href="/price">price</Link>
    <Link href="/contacts">contacts</Link>
  </>;
}