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