NextJS में उन्नत मेनू
पिछले पाठ में, हमने सामान्य लिंक्स से बने मेनू की समस्या पर चर्चा की थी। NextJS इस समस्या को हल कर सकता है और यह सुनिश्चित कर सकता है कि लिंक पर क्लिक करने से पूरे पेज को दोबारा लोड न होना पड़े। प्रदर्शन अनुकूलन के लिए, केवल बदला हुआ हिस्सा Ajax के माध्यम से लोड होगा।
इसके लिए, लिंक्स के बजाय हम
एक विशेष कंपोनेंट Link
का उपयोग करेंगे।
आइए इसे इम्पोर्ट करें:
import Link from 'next/link';
आइए अब अपने मेनू को इस कंपोनेंट के through दोबारा बनाएं:
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 कंपोनेंट के through दोबारा बनाएं।
सुनिश्चित करें कि मेनू लिंक्स पर क्लिक करने से अब पेज दोबारा लोड नहीं होता है।
