Als Frontend-Entwickler wartet man häufig darauf, dass das Backend seine APIs fertigstellt, bevor man das Frontend vollständig implementieren kann. Glücklicherweise können Tools wie MockAPI.io Ihnen dabei helfen, ein funktionierendes Backend zu simulieren, sodass Sie ohne Verzögerungen mit der Codierung des Frontend-Teils Ihrer Anwendung fortfahren können.

In diesem Blogbeitrag untersuchen wir, wie man MockAPI.io in eine neue Next.js-App integriert, um Backend-Daten zu simulieren, während das eigentliche Backend entwickelt wird.

Was ist MockAPI.io?

MockAPI.io ist eine benutzerfreundliche Plattform, die es Entwicklern ermöglicht, simulierte REST-APIs zu erstellen. Mit diesem Tool können Sie echte API-Endpunkte simulieren, Ressourcen (Datenmodelle) definieren und Ihre Anwendung testen, ohne ein tatsächliches Backend zu benötigen. Es ist besonders nützlich für die Frontend-Entwicklung und das Prototyping.

Warum MockAPI.io verwenden?

Unabhängig arbeiten: Sie müssen nicht warten, bis die Backend-Entwicklung abgeschlossen ist, bevor Sie mit der Arbeit am Frontend beginnen.
Schnellere Iterationen: Sie können Endpunkte schnell simulieren und verschiedene Szenarien testen.
API-Simulation: Sie können die Struktur der echten API simulieren und so den Wechsel zum eigentlichen Backend reibungslos gestalten, wenn es fertig ist.
Ideal für die Zusammenarbeit: Ermöglicht Ihnen die enge Zusammenarbeit mit Backend-Entwicklern durch die Definition erwarteter API-Strukturen.

Schritt-für-Schritt-Anleitung: Einrichten von MockAPI.io mit einer Next.js-App

1. Erstellen Sie eine neue Next.js-App
Erstellen wir zunächst ein neues Next.js-Projekt. Führen Sie den folgenden Befehl aus, um die App zu initialisieren:

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

In Ihr Projektverzeichnis verschieben:

cd mockapi-nextjs-app

Starten Sie den Entwicklungsserver, um sicherzustellen, dass alles ordnungsgemäß eingerichtet ist:

npm run dev

Ihre App sollte jetzt auf http://localhost:3000 ausgeführt werden.

2. Erstellen Sie ein MockAPI.io-Konto
Melden Sie sich als Nächstes bei MockAPI.io an, wenn Sie noch kein Konto haben. Sobald Sie angemeldet sind, können Sie ein neues Projekt erstellen, indem Sie auf die Schaltfläche „Neues Projekt erstellen“ klicken.

3. Erstellen Sie eine Ressource (Endpunkt)
Sobald Ihr Projekt erstellt ist, definieren Sie eine Ressource, z. B. „Benutzer“:

Klicken Sie auf Ressource hinzufügen und nennen Sie sie „Benutzer“.
Definieren Sie Eigenschaften wie ID, Name, E-Mail und Avatar (für Benutzerprofilbilder).
MockAPI.io generiert automatisch einige gefälschte Benutzerdaten für Sie.
Sie haben jetzt eine Liste von API-Endpunkten wie:

GET /users – Alle Benutzer abrufen.
POST /users – Erstellen Sie einen neuen Benutzer.
PUT /users/{id} – Einen Benutzer aktualisieren.
DELETE /users/{id} – Einen Benutzer löschen.
Die Basis-URL für Ihre API sieht etwa so aus: https://mockapi.io/projects/{your_project_id}/users.

4. Daten von MockAPI in Next.js abrufen
Nachdem Sie nun über Ihre Mock-API verfügen, können Sie sie mithilfe von getServerSideProps oder getStaticProps von Next.js in Ihre Next.js-App integrieren. Lassen Sie uns Daten vom /users-Endpunkt abrufen und in der App anzeigen.

So können Sie getServerSideProps im Next.js-Projekt verwenden, um Benutzerdaten von MockAPI.io abzurufen.

Erstellen Sie eine neue Seite in 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;

In diesem Beispiel:

getServerSideProps stellt eine serverseitige Anfrage zum Abrufen von Benutzerdaten vom Schein-API-Endpunkt.
Die Benutzerliste wird mit Profilbildern, Namen und E-Mails gerendert.

5. Testen Sie die Mock-API-Integration
Führen Sie den Entwicklungsserver aus, um die Integration zu testen:

npm run dev

Navigieren Sie zu http://localhost:3000/users und Sie sollten eine Liste der von MockAPI.io abgerufenen Benutzer in Ihrer Next.js-App sehen.

6. Neue Funktionen hinzufügen: Einen Benutzer erstellen
Fügen wir eine Funktion hinzu, mit der Sie über ein Formular in Ihrer Next.js-App einen neuen Benutzer erstellen können. Wir senden eine POST-Anfrage an den MockAPI-Endpunkt.

Erstellen Sie eine Formularkomponente in 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;

Wenn Sie nun das Formular abschicken, wird ein neuer Benutzer in MockAPI erstellt.

7. Übergang zum echten Backend
Sobald Ihr eigentliches Backend fertig ist, ist das Ersetzen der Schein-API einfach. Aktualisieren Sie die Basis-URL in Ihren Axios-Anfragen so, dass sie auf das echte Backend verweist, und Ihre App sollte nahtlos und ohne Änderungen an der Struktur funktionieren.

Abschluss

Die Verwendung von MockAPI.io mit Next.js ist eine hervorragende Möglichkeit, Ihre Frontend-Anwendung zu erstellen und zu testen, selbst wenn das Backend noch in Arbeit ist. Durch die Simulation echter API-Interaktionen können Sie die Frontend-Entwicklung vorantreiben und einen reibungslosen Übergang gewährleisten, sobald das eigentliche Backend fertiggestellt ist.

Egal, ob Sie in einem großen Team oder einem Einzelprojekt arbeiten, MockAPI.io ist ein wertvolles Tool für Frontend-Entwickler. Nutzen Sie es noch heute, um Ihren Entwicklungsprozess zu optimieren!