NextJS में उन्नत मेनू

पिछले पाठ में, हमने सामान्य लिंक्स से बने मेनू की समस्या पर चर्चा की थी। NextJS इस समस्या को हल कर सकता है और यह सुनिश्चित कर सकता है कि लिंक पर क्लिक करने से पूरे पेज को दोबारा लोड न होना पड़े। प्रदर्शन अनुकूलन के लिए, केवल बदला हुआ हिस्सा Ajax के माध्यम से लोड होगा।

इसके लिए, लिंक्स के बजाय हम एक विशेष कंपोनेंट Link का उपयोग करेंगे। आइए इसे इम्पोर्ट करें:

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

आइए अब अपने मेनू को इस कंपोनेंट के through दोबारा बनाएं:

/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>
  </>;
}