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