close

API बाट डाटा ल्याउँदै Next.js: getStaticProps र getServerSideProps प्रयोग गर्दै

एप्लिकेसन विकास गर्ने प्रक्रियामा Next.js, API बाट डाटा ल्याउनु गतिशील सामग्री प्रदर्शन गर्नको लागि महत्त्वपूर्ण पक्ष हो। getStaticProps यस लेखले तपाईंलाई निर्माण प्रक्रियाको क्रममा स्थिर डाटा ल्याउन र getServerSideProps प्रत्येक अनुरोधमा API बाट डाटा ल्याउन प्रयोग गरी मार्गदर्शन गर्नेछ ।

getStaticProps प्रयोग गर्दै

getStaticProps बिल्ट-इन विधि हो Next.js जसले निर्माण प्रक्रियाको क्रममा स्थिर डाटा ल्याउन समर्थन गर्दछ। यसले तपाइँलाई सोधिएको डाटाको साथ स्थिर पृष्ठहरू सिर्जना गर्न अनुमति दिन्छ, जुन अनुप्रयोग प्रयोग गर्नु अघि पूर्व-रेन्डर गरिएको छ। यहाँ प्रयोग गर्ने आधारभूत उदाहरण हो getStaticProps:

export async function getStaticProps() {  
  const response = await fetch('https://api.example.com/data');  
  const data = await response.json();  
  
  return {  
    props: {  
      data,  
    },  
  };  
}

माथिको उदाहरणमा, हामी fetch API बाट डेटा क्वेरी गर्न प्रयोग गर्छौं र डेटालाई प्रोप्सको रूपमा फर्काउँछौं।

getServerSideProps प्रयोग गर्दै

getServerSideProps Next.js प्रत्येक अनुरोधमा API बाट डाटा प्राप्त गर्न सक्षम बनाउने अर्को विधि हो । यसले सुनिश्चित गर्दछ कि सामग्री सधैं अप-टु-डेट र गतिशील छ। यहाँ प्रयोग गर्ने एउटा उदाहरण हो getServerSideProps:

export async function getServerSideProps() {  
  const response = await fetch('https://api.example.com/data');  
  const data = await response.json();  
  
  return {  
    props: {  
      data,  
    },  
  };  
}

यस getServerSideProps विधिले प्रत्येक पटक पृष्ठमा अनुरोध गर्दा API बाट डाटा क्वेरी गर्नेछ।

निष्कर्ष

यस खण्डमा, तपाईंले आफ्नो Next.js एप्लिकेसनमा API बाट कसरी प्रभावकारी रूपमा डाटा ल्याउने भनेर सिक्नुभएको छ। प्रयोग गरेर getStaticProps र getServerSideProps, तपाइँ तपाइँको अनुप्रयोगमा लचिलो रूपमा स्थिर र गतिशील सामग्री दुवै प्रदर्शन गर्न सक्नुहुन्छ।