एक फ्रंटएंड डेवलपर के रूप में, फ्रंटएंड को पूरी तरह से लागू करने से पहले अपने एपीआई को पूरा करने के लिए बैकएंड पर इंतजार करना आम बात है। सौभाग्य से, MockAPI.io जैसे उपकरण आपको एक कार्यशील बैकएंड का अनुकरण करने में मदद कर सकते हैं, जिससे आप बिना किसी देरी के अपने एप्लिकेशन के फ्रंटएंड भाग को कोड करने के लिए आगे बढ़ सकते हैं।

इस ब्लॉग पोस्ट में, हम यह पता लगाएंगे कि बैकएंड डेटा को मॉक करने के लिए MockAPI.io को एक नए Next.js ऐप में कैसे एकीकृत किया जाए, जबकि वास्तविक बैकएंड विकास के अधीन है।

MockAPI.io क्या है?

MockAPI.io एक उपयोग में आसान प्लेटफ़ॉर्म है जो डेवलपर्स को नकली REST API बनाने की अनुमति देता है। इस टूल से, आप वास्तविक एपीआई एंडपॉइंट का अनुकरण कर सकते हैं, संसाधनों (डेटा मॉडल) को परिभाषित कर सकते हैं, और वास्तविक बैकएंड की आवश्यकता के बिना अपने एप्लिकेशन का परीक्षण कर सकते हैं। यह फ्रंटएंड विकास और प्रोटोटाइप के लिए विशेष रूप से उपयोगी है।

MockAPI.io का उपयोग क्यों करें?

स्वतंत्र रूप से काम करें: आपको फ्रंटएंड पर काम शुरू करने से पहले बैकएंड विकास समाप्त होने की प्रतीक्षा करने की आवश्यकता नहीं है।
तेज़ पुनरावृत्तियाँ: यह आपको समापन बिंदुओं का शीघ्रता से अनुकरण करने और विभिन्न परिदृश्यों का परीक्षण करने की अनुमति देता है।
एपीआई सिमुलेशन: आप वास्तविक एपीआई की संरचना का अनुकरण कर सकते हैं, जिससे तैयार होने पर वास्तविक बैकएंड पर स्विच करना आसान हो जाता है।
सहयोग के लिए बढ़िया: आपको अपेक्षित एपीआई संरचनाओं को परिभाषित करके बैकएंड डेवलपर्स के साथ मिलकर काम करने की अनुमति देता है।

चरण-दर-चरण मार्गदर्शिका: Next.js ऐप के साथ MockAPI.io सेट करना

1. एक नया Next.js ऐप बनाएं
सबसे पहले, आइए एक नया Next.js प्रोजेक्ट बनाएं। ऐप को आरंभ करने के लिए निम्नलिखित कमांड चलाएँ:

npx create-next-app@latest mockapi-nextjs-app

अपनी परियोजना निर्देशिका में जाएँ:

cd mockapi-nextjs-app

यह सुनिश्चित करने के लिए कि सब कुछ ठीक से सेट है, डेवलपमेंट सर्वर प्रारंभ करें:

npm run dev

आपका ऐप अब http://localhost:3000 पर चलना चाहिए।

2. एक MockAPI.io खाता बनाएं
इसके बाद, यदि आपके पास पहले से कोई खाता नहीं है तो MockAPI.io पर साइन अप करें। एक बार लॉग इन करने के बाद, आप नया प्रोजेक्ट बनाएं बटन पर क्लिक करके एक नया प्रोजेक्ट बना सकते हैं।

3. एक संसाधन बनाएं (समाप्ति बिंदु)
एक बार जब आपका प्रोजेक्ट बन जाए, तो एक संसाधन परिभाषित करें, जैसे "उपयोगकर्ता":

संसाधन जोड़ें पर क्लिक करें और इसे "उपयोगकर्ता" नाम दें।
आईडी, नाम, ईमेल और अवतार जैसी संपत्तियों को परिभाषित करें (उपयोगकर्ता प्रोफ़ाइल चित्रों के लिए)।
MockAPI.io आपके लिए कुछ नकली उपयोगकर्ता डेटा स्वतः उत्पन्न करेगा।
अब आपके पास एपीआई एंडपॉइंट्स की एक सूची होगी जैसे:

/उपयोगकर्ता प्राप्त करें - सभी उपयोगकर्ता प्राप्त करें।
पोस्ट/उपयोगकर्ता - एक नया उपयोगकर्ता बनाएं।
PUT /users/{id} - एक उपयोगकर्ता को अपडेट करें।
DELETE /users/{id} - एक उपयोगकर्ता को हटाएं।
आपके एपीआई का आधार यूआरएल कुछ इस तरह दिखेगा https://mockapi.io/projects/{your_project_id}/users.

4. Next.js में MockAPI से डेटा प्राप्त करें
अब जब आपके पास अपना मॉक एपीआई है, तो आप Next.js के getServerSideProps या getStaticProps का उपयोग करके इसे अपने Next.js ऐप में एकीकृत कर सकते हैं। आइए /users एंडपॉइंट से डेटा प्राप्त करें और इसे ऐप में प्रदर्शित करें।

यहां बताया गया है कि आप MockAPI.io से उपयोगकर्ता डेटा प्राप्त करने के लिए Next.js प्रोजेक्ट में getServerSideProps का उपयोग कैसे कर सकते हैं।

pages/users.js में एक नया पेज बनाएं:

import React from 'react';
import axios from 'axios';

const Users = ({ users }) => {
  return (
    

      
User List
      

        {users.map((user) => (
          

            
            {user.name} - {user.email}
          
        ))}
      
  );
};

// Fetch data on each request (SSR)
export async function getServerSideProps() {
  try {
    const response = await axios.get('https://mockapi.io/projects/{your_project_id}/users');
    const users = response.data;

    return {
      props: { users }, // Will be passed to the page component as props
    };
  } catch (error) {
    console.error("Error fetching users:", error);
    return {
      props: { users: [] },
    };
  }
}

export default Users;

इस उदाहरण में:

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

5. मॉक एपीआई एकीकरण का परीक्षण करें
एकीकरण का परीक्षण करने के लिए विकास सर्वर चलाएँ:

npm run dev

http://localhost:3000/users पर नेविगेट करें, और आपको अपने Next.js ऐप में MockAPI.io से प्राप्त उपयोगकर्ताओं की एक सूची दिखाई देनी चाहिए।

6. नई सुविधाएँ जोड़ना: एक उपयोगकर्ता बनाएँ
आइए एक सुविधा जोड़ें जहां आप अपने Next.js ऐप में एक फॉर्म के माध्यम से एक नया उपयोगकर्ता बना सकते हैं। हम MockAPI एंडपॉइंट पर एक POST अनुरोध भेजेंगे।

pages/add-user.js में एक फॉर्म घटक बनाएं:

import { useState } from 'react';
import axios from 'axios';

const AddUser = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [avatar, setAvatar] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      const response = await axios.post('https://mockapi.io/projects/{your_project_id}/users', {
        name,
        email,
        avatar
      });
      console.log("User added:", response.data);
    } catch (error) {
      console.error("Error adding user:", error);
    }
  };

  return (
    

      
Add New User
      

         setName(e.target.value)}
        />
         setEmail(e.target.value)}
        />
         setAvatar(e.target.value)}
        />
        Add User
      
    
  );
};

export default AddUser;

अब, जब आप फॉर्म सबमिट करेंगे, तो MockAPI में एक नया उपयोगकर्ता बनाया जाएगा।

7. वास्तविक बैकएंड में संक्रमण
एक बार जब आपका वास्तविक बैकएंड तैयार हो जाए, तो मॉक एपीआई को बदलना आसान है। वास्तविक बैकएंड को इंगित करने के लिए अपने एक्सियोस अनुरोधों में आधार यूआरएल को अपडेट करें, और आपका ऐप संरचना में किसी भी बदलाव के बिना निर्बाध रूप से काम करना चाहिए।

निष्कर्ष

Next.js के साथ MockAPI.io का उपयोग करना आपके फ्रंटएंड एप्लिकेशन को बनाने और परीक्षण करने का एक शानदार तरीका है, भले ही बैकएंड अभी भी प्रगति पर हो। वास्तविक एपीआई इंटरैक्शन का अनुकरण करके, आप फ्रंटएंड विकास को आगे बढ़ा सकते हैं और वास्तविक बैकएंड पूरा होने के बाद एक सुचारु संक्रमण सुनिश्चित कर सकते हैं।

चाहे आप एक बड़ी टीम या एकल प्रोजेक्ट पर काम कर रहे हों, MockAPI.io फ्रंटएंड डेवलपर्स के लिए एक मूल्यवान उपकरण है। अपनी विकास प्रक्रिया को सुव्यवस्थित करने के लिए आज ही इसका उपयोग शुरू करें!