Next.js मूल बातें: पेज बनाना और मूल बातें Routing समझाई गईं

वेब एप्लिकेशन विकास की प्रक्रिया में, पृष्ठों को प्रबंधित करना और उनके बीच नेविगेट करना एक महत्वपूर्ण पहलू है। इस लेख श्रृंखला में, हम पेज बनाने और नेविगेशन लागू करने की बुनियादी बातों पर चर्चा करेंगे Next.js । लचीले और प्रबंधनीय वेब अनुप्रयोगों के निर्माण के लिए ये मूलभूत अवधारणाएँ आवश्यक हैं।

प्रथम पृष्ठ बनाना और प्रदर्शित करना

सबसे पहले, आइए समझें कि एक साधारण पेज कैसे बनाएं और प्रदर्शित करें Next.js । pages आप अपने प्रोजेक्ट की निर्देशिका में फ़ाइलें बनाकर पेज बना सकते हैं । उदाहरण के लिए, एक स्वागत पृष्ठ बनाने के लिए, आप निर्देशिका welcome.js के भीतर नामित एक फ़ाइल बना सकते हैं। pages

// pages/welcome.js  
function WelcomePage() {  
  return <h1>Welcome to Next.js!</h1>;  
}  
  
export default WelcomePage;  

उपरोक्त कोड स्निपेट में, हमने एक सरल स्वागत पृष्ठ बनाया है। जब आप अपने वेब ब्राउज़र में पथ तक पहुंचते हैं, तो आपको "आपका स्वागत है !" /welcome संदेश दिखाई देगा। Next.js प्रदर्शित.

बुनियादी Routing

Next.js एक मजबूत और सहज routing प्रणाली प्रदान करता है जो पृष्ठों के बीच नेविगेट करना आसान बनाता है। Routing in निर्देशिका Next.js पर आधारित है pages, इस निर्देशिका में प्रत्येक फ़ाइल एक विशिष्ट पथ के अनुरूप है। about.js उदाहरण के लिए, निर्देशिका के भीतर नामित एक फ़ाइल पथ pages पर पहुंच योग्य एक पृष्ठ बनाएगी । /about

लिंक और नेविगेशन बनाना

पृष्ठों के बीच लिंक बनाने और उनके बीच नेविगेट करने के लिए, हम लाइब्रेरी <Link> से घटक का उपयोग कर सकते हैं। next/link नीचे स्वागत पृष्ठ से हमारे बारे में पृष्ठ तक एक लिंक बनाने का एक उदाहरण दिया गया है।

// pages/welcome.js  
import Link from 'next/link';  
  
function WelcomePage() {  
  return( 
    <div>  
      <h1>Welcome to Next.js!</h1>  
      <Link href="/about">Learn more about us</Link>  
    </div>  
 );  
}  
  
export default WelcomePage;  

उपरोक्त उदाहरण में, जब आप "हमारे बारे में और जानें" लिंक पर क्लिक करते हैं, तो आपको /about पृष्ठ पर पुनः निर्देशित किया जाएगा।

निष्कर्ष

इस अनुभाग में, हमने पता लगाया है कि सरल पेज कैसे बनाएं और प्रदर्शित करें और निर्देशिका और घटक का Next.js उपयोग करके पेजों के बीच नेविगेशन कैसे लागू करें । किसी एप्लिकेशन के निर्माण में ये महत्वपूर्ण प्रारंभिक चरण हैं । आगामी लेखों में, हम गतिशील और इंटरैक्टिव वेब एप्लिकेशन बनाने के अन्य पहलुओं का पता लगाना जारी रखेंगे। pages <Link> Next.js Next.js