Next.js में API का निर्माण और उपभोग कैसे करें

वे दिन गए जब आपको अपनी वेबसाइट के लिए एक अलग बैकएंड बनाना पड़ता था। Next.js फ़ाइल-आधारित API रूटिंग के साथ, आप अपने API को Next.js प्रोजेक्ट के अंदर लिखकर अपना जीवन आसान बना सकते हैं।

Next.js एक रिएक्ट मेटा-फ्रेमवर्क है जिसमें ऐसी विशेषताएं हैं जो उत्पादन-तैयार वेब ऐप्स के निर्माण की प्रक्रिया को सरल बनाती हैं। आप देखेंगे कि Next.js में REST API कैसे बनाया जाता है और उस API से डेटा को Next.js पेज पर कैसे उपयोग किया जाता है।

क्रिएट-नेक्स्ट-ऐप का उपयोग करके एक नेक्स्ट.जेएस प्रोजेक्ट बनाएं

आप create-next-app CLI टूल का उपयोग करके एक नया Next.js प्रोजेक्ट बना सकते हैं। यह आपको Next.js एप्लिकेशन बनाने के साथ आरंभ करने के लिए आवश्यक पैकेज और फ़ाइलें स्थापित करता है।

api-routes नामक एक नया Next.js फोल्डर बनाने के लिए टर्मिनल में इस कमांड को रन करें। आपको क्रिएट-नेक्स्ट-ऐप इंस्टॉल करने का संकेत मिल सकता है।

npx बनाएं-अगला-ऐप एपीआई-मार्ग

जब कमांड खत्म हो जाए, तो एपीआई रूट बनाना शुरू करने के लिए एपीआई-रूट्स फ़ोल्डर खोलें।

Next.js में API रूटिंग

एपीआई मार्ग सर्वर पर चलते हैं और इसके कई उपयोग हैं जैसे उपयोगकर्ता डेटा को डेटाबेस में सहेजना या एपीआई से डेटा को बिना बढ़ाए लाना CORS नीति त्रुटि.

Next.js में, आपको /pages/api फ़ोल्डर के अंदर API रूट बनाना होगा। Next.js इस फ़ोल्डर की प्रत्येक फ़ाइल के लिए API समापन बिंदु बनाता है। यदि आप user.js को /pages/api में जोड़ते हैं, तो Next.js पर एक समापन बिंदु बनाएगा http://localhost: 3000/एपीआई/उपयोगकर्ता।

एक मूल Next.js API रूट में निम्नलिखित सिंटैक्स होता है।

निर्यातगलती करनासमारोहहैंडलर(अनुरोध, Res) {
 res.status (200).json ({ नाम: 'जॉन डो' })
}

इसके काम करने के लिए आपको हैंडलर फ़ंक्शन को निर्यात करना होगा।

एपीआई मार्ग बनाना

todo.js नामक एक नई फ़ाइल बनाएँ /pages/api टूडू मदों के लिए एक एपीआई मार्ग जोड़ने के लिए फ़ोल्डर।

टोडो डेटाबेस का मजाक उड़ाना

टॉड्स प्राप्त करने के लिए, आपको एक GET समापन बिंदु बनाना होगा। सरलता के लिए। यह ट्यूटोरियल डेटाबेस के बजाय टूडू आइटम्स की एक सरणी का उपयोग करता है, लेकिन MongoDB या MySQL जैसे डेटाबेस का उपयोग करने के लिए स्वतंत्र महसूस करें।

अपने एप्लिकेशन के रूट फ़ोल्डर में todo.js में टूडू आइटम बनाएं, फिर निम्न डेटा जोड़ें।

निर्यातकॉन्स्ट टूडोस = [
 {
 आईडी: 1,
 ऐसा करने के लिए: "जिसकी मुझे परवाह है उसके लिए कुछ अच्छा करो",
 पुरा होना: सत्य,
 उपयोगकर्ता आईडी: 26,
 },
 {
 आईडी: 2,
 ऐसा करने के लिए: "पचास राज्यों और उनकी राजधानियों को याद करें",
 पुरा होना: असत्य,
 उपयोगकर्ता आईडी: 48,
 },
// अन्य टॉड्स
];

ये टूडू आइटम DummyJSON वेबसाइट से हैं, a बाकी एपीआई नकली डेटा के लिए। आप इससे सटीक डेटा प्राप्त कर सकते हैं DummyJSON todos समापन बिंदु.

इसके बाद, एपीआई रूट बनाएं /pages/api/todos.js और हैंडलर फ़ंक्शन जोड़ें।

आयात {सभी} से "../../ऐसा करने के लिए";
निर्यातसमारोहहैंडलर(अनुरोध, Res) {
कॉन्स्ट {विधि} = अनुरोध;
बदलना (तरीका) {
 मामला "पाना":
आर ई।दर्जा(200).json(सब);
तोड़ना;
 मामला "डाक":
कॉन्स्ट {टूडू, पूरा} = req.body;
सब।धकेलना({
पहचान: सब।लंबाई + 1,
 ऐसा करने के लिए,
 पुरा होना,
 });
आर ई।दर्जा(200).json(सब);
तोड़ना;
गलती करना:
 res.setHeader("अनुमति देना", ["पाना", "डाक"]);
 res.status (405)।अंत(`पद्धति ${विधि} अनुमति नहीं');
तोड़ना;
 }
}

यह रूट GET और POST एंडपॉइंट्स को हैंडल करता है। यह GET अनुरोध के लिए सभी todos लौटाता है और POST अनुरोध के लिए todo डेटाबेस में एक todo आइटम जोड़ता है। अन्य तरीकों के लिए, हैंडलर एक त्रुटि देता है।

फ्रंटेंड में एपीआई रूट्स का उपभोग करना

आपने एक एपीआई एंडपॉइंट बनाया है जो एक JSON ऑब्जेक्ट लौटाता है जिसमें टॉड्स की एक सरणी होती है।

API का उपयोग करने के लिए, एक फ़ंक्शन बनाएं जिसे fetchTodos कहा जाता है जो API समापन बिंदु से डेटा पुनर्प्राप्त करता है। फ़ंक्शन लाने की विधि का उपयोग करता है लेकिन आप भी कर सकते हैं API अनुरोध करने के लिए Axios का उपयोग करें. जब आप बटन क्लिक करते हैं तो इस फ़ंक्शन को कॉल करें।

आयात सिर से "अगला / सिर";
आयात {यूज़स्टेट} से "प्रतिक्रिया"; 
निर्यातगलती करनासमारोहघर() {
कॉन्स्ट [todos, settodos] = useState([]);
कॉन्स्ट फ़ेच टोडोस = async () => {
कॉन्स्ट प्रतिक्रिया = इंतजार लाना("/api/टॉडोस");
कॉन्स्ट डेटा = इंतजार प्रतिक्रिया.जेसन ();
 सेटटोडोस (डेटा);
 };
वापस करना (
<div className={styles.container}>
<सिर>
<शीर्षक>अगला ऐप बनाएं</title>
<मेटा नाम ="विवरण" सामग्री ="क्रिएट नेक्स्ट ऐप द्वारा जेनरेट किया गया" />
<लिंक रिले ="आइकन" href="/favicon.ico" />
</Head>
<मुख्य>
<बटन ऑनक्लिक = {fetchTodos}>सभी प्राप्त करें</button>
<उल>
 {todos.map ((टूडू) => {
वापस करना (
<ली
 शैली = {{ रंग: `$ {टूडू। पूर्ण? "हरा": "लाल"}` }}
 कुंजी = {todo.id}
>
 {todo.todo}:{todo.completed}।
</li>
 );
 })}
</ul>
</main>
</div>
 );
}

इस स्निपेट की सूची टूडू आइटम को प्रदर्शित करती है जब वे लाए जाते हैं।

पोस्ट एंडपॉइंट के लिए, सेवटोडो नामक एक नया फ़ंक्शन बनाएं जो एपीआई के लिए एक पोस्ट अनुरोध करता है। लाने का अनुरोध नए टूडू आइटम को शरीर में संग्रहीत करता है और नए सहित सभी टूडू आइटम लौटाता है। सेवटोडो फ़ंक्शन तब उन्हें टॉडोस स्थिति में संग्रहीत करता है।

कॉन्स्ट सेव टोडो = async () => {
कॉन्स्ट प्रतिक्रिया = इंतजार लाना("/api/टूडोस", {
 तरीका: "डाक",
 शरीर: JSON.stringify (newTodo),
 हेडर: {
"सामग्री प्रकार": "एप्लिकेशन/जेसन",
 },
 });
कॉन्स्ट डेटा = इंतजार प्रतिक्रिया.जेसन ();
 सेटटोडोस (डेटा);
};

फिर, नया टूडू आइटम प्राप्त करने के लिए टेक्स्ट इनपुट बार के साथ एक फॉर्म बनाएं। इस फॉर्म का सबमिट हैंडलर फंक्शन सेवटोडो फंक्शन को कॉल करेगा।

आयात सिर से "अगला / सिर";
आयात {यूज़रेड्यूसर, यूज़स्टेट} से "प्रतिक्रिया";
आयात शैलियों से "../styles/Home.module.css";
निर्यातगलती करनासमारोहघर() {
कॉन्स्ट [todos, settodos] = useState([]);
कॉन्स्ट [newTodo, setnewTodo] = useState({
 ऐसा करने के लिए: "",
 पुरा होना: असत्य,
 });
कॉन्स्ट फ़ेच टोडोस = async () => {
// FetchTodos
 };
कॉन्स्ट सेव टोडो = async (ई) => {
कॉन्स्ट प्रतिक्रिया = इंतजार लाना("/api/टूडोस", {
 तरीका: "डाक",
 शरीर: JSON.stringify (newTodo),
 हेडर: {
"सामग्री प्रकार": "एप्लिकेशन/जेसन",
 },
 });
कॉन्स्ट डेटा = इंतजार प्रतिक्रिया.जेसन ();
 सेटटोडोस (डेटा);
 };
कॉन्स्ट हैंडल चेंज = (ई) => {
 सेटन्यूटोडो({
ऐसा करने के लिए: इ।लक्ष्य।कीमत,
 });
 };
कॉन्स्ट हैंडलसबमिट = (ई) => {
इ।चूक को रोकें();
 सेवटोडो ();
 सेटन्यूटोडो({
 ऐसा करने के लिए: '',
 });
 };
वापस करना (
<div className={styles.container}>
<सिर>
<शीर्षक>अगला ऐप बनाएं</title>
<मेटा नाम ="विवरण" सामग्री ="क्रिएट नेक्स्ट ऐप द्वारा जेनरेट किया गया" />
<लिंक रिले ="आइकन" href="/favicon.ico" />
</Head>
<मुख्य>
// क्लिक किए जाने पर टूडू आइटम प्राप्त करता है
<बटन ऑनक्लिक = {fetchTodos}>सभी प्राप्त करें</button>
// सबमिट किए जाने पर एक नया टूडू आइटम सहेजता है
<फॉर्म ऑनसबमिट = {हैंडलसबमिट}>
<इनपुट प्रकार ="मूलपाठ" onChange={handleChange} value={newTodo.todo} />
</form>
<उल>
 {// सूची टूडू आइटम}
</ul>
</main>
</div>
 );
}

हर बार जब उपयोगकर्ता फॉर्म सबमिट करता है तो हैंडलर डेटाबेस में एक नया टूडू जोड़ता है। साथ ही, यह फ़ंक्शन एपीआई से प्राप्त डेटा का उपयोग करके टूडोस मान को अपडेट करता है जो बदले में सूची में नया टूडू आइटम जोड़ता है।

एपीआई रूटिंग नेक्स्ट.जेएस की ताकत में से एक है

आपने देखा है कि आप Next.js API रूट कैसे बनाते और उपयोग करते हैं। अब आप अपने Next.js प्रोजेक्ट फोल्डर को छोड़े बिना एक फुल स्टैक एप्लिकेशन बना सकते हैं। API रूटिंग उन कई लाभों में से एक है जो Next.js प्रदान करता है।

Next.js कोड स्प्लिटिंग, आलसी लोडिंग और बिल्ट-इन CSS सपोर्ट जैसे प्रदर्शन अनुकूलन भी प्रदान करता है। यदि आप एक ऐसी वेबसाइट बना रहे हैं जो तेज और SEO के अनुकूल होनी चाहिए, तो आपको Next.js पर विचार करना चाहिए।