Comment utiliser MockAPI avec une application Next.js lorsque le backend n'est pas prêt

En tant que développeur frontend, il est courant de se retrouver à attendre que le backend termine ses API avant de pouvoir implémenter entièrement le frontend. Heureusement, des outils comme MockAPI.io peuvent vous aider à simuler un backend fonctionnel, vous permettant de procéder au codage de la partie frontend de votre application sans délai.

Dans cet article de blog, nous explorerons comment intégrer MockAPI.io dans une nouvelle application Next.js pour simuler les données du backend pendant que le véritable backend est en cours de développement.

Qu'est-ce que MockAPI.io ?

MockAPI.io est une plateforme facile à utiliser qui permet aux développeurs de créer des API REST simulées. Avec cet outil, vous pouvez simuler de vrais points de terminaison d'API, définir des ressources (modèles de données) et tester votre application sans avoir besoin d'un véritable backend. C’est particulièrement utile pour le développement frontend et le prototypage.

Pourquoi utiliser MockAPI.io ?

Travailler de manière indépendante : Vous n'avez pas besoin d'attendre que le développement backend soit terminé avant de commencer à travailler sur le frontend.
Itérations plus rapides : il vous permet de simuler rapidement des points de terminaison et de tester différents scénarios.
Simulation API : vous pouvez simuler la structure de la véritable API, facilitant ainsi le passage au backend réel lorsqu'il est prêt.
Idéal pour la collaboration : vous permet de travailler en étroite collaboration avec les développeurs backend en définissant les structures API attendues.

Guide étape par étape : configuration de MockAPI.io avec une application Next.js

1. Créer une nouvelle application Next.js
Tout d’abord, créons un nouveau projet Next.js. Exécutez la commande suivante pour initialiser l'application :

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

Déplacez-vous dans le répertoire de votre projet :

cd mockapi-nextjs-app

Démarrez le serveur de développement pour vous assurer que tout est correctement configuré :

npm run dev

Votre application devrait maintenant fonctionner sur http://localhost:3000.

2. Créer un compte MockAPI.io
Ensuite, inscrivez-vous sur MockAPI.io si vous n'avez pas déjà de compte. Une fois connecté, vous pouvez créer un nouveau projet en cliquant sur le bouton Créer un nouveau projet.

3. Créer une ressource (point de terminaison)
Une fois votre projet créé, définissez une ressource, telle que « Utilisateurs » :

Cliquez sur Ajouter une ressource et nommez-la « Utilisateurs ».
Définissez des propriétés telles que l'identifiant, le nom, l'e-mail et l'avatar (pour les photos de profil utilisateur).
MockAPI.io générera automatiquement de fausses données utilisateur pour vous.
Vous aurez maintenant une liste de points de terminaison d'API comme :

GET /users - Obtenez tous les utilisateurs.
POST /users - Créez un nouvel utilisateur.
PUT /users/{id} - Mettre à jour un utilisateur.
DELETE /users/{id} - Supprimer un utilisateur.
L'URL de base de votre API ressemblera à https://mockapi.io/projects/{your_project_id}/users.

4. Récupérer les données de MockAPI dans Next.js
Maintenant que vous disposez de votre API fictive, vous pouvez l'intégrer dans votre application Next.js à l'aide de getServerSideProps ou getStaticProps de Next.js. Récupérons les données du point de terminaison /users et affichons-les dans l'application.

Voici comment utiliser getServerSideProps dans le projet Next.js pour récupérer les données utilisateur de MockAPI.io.

Créez une nouvelle page dans pages/users.js :

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

const Users = ({ users }) => {
  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            <img src={user.avatar} alt={`${user.name}'s avatar`} width="50" />
            {user.name} - {user.email}
          </li>
        ))}
      </ul>
    </div>
  );
};

// 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;

Dans cet exemple :

getServerSideProps effectue une requête côté serveur pour récupérer les données utilisateur à partir du point de terminaison de l'API fictive.
La liste des utilisateurs est affichée avec des photos de profil, des noms et des e-mails.

5. Testez l'intégration de l'API Mock
Exécutez le serveur de développement pour tester l'intégration :

npm run dev

Accédez à http://localhost:3000/users et vous devriez voir une liste des utilisateurs extraits de MockAPI.io affichée dans votre application Next.js.

6. Ajout de nouvelles fonctionnalités : créer un utilisateur
Ajoutons une fonctionnalité permettant de créer un nouvel utilisateur via un formulaire dans votre application Next.js. Nous enverrons une requête POST au point de terminaison MockAPI.

Créez un composant de formulaire dans 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 (
    <div>
      <h1>Add New User</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="Name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        <input
          type="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <input
          type="text"
          placeholder="Avatar URL"
          value={avatar}
          onChange={(e) => setAvatar(e.target.value)}
        />
        <button type="submit">Add User</button>
      </form>
    </div>
  );
};

export default AddUser;

Maintenant, lorsque vous soumettez le formulaire, un nouvel utilisateur sera créé dans MockAPI.

7. Transition vers le vrai backend
Une fois que votre backend actuel est prêt, remplacer l’API fictive est simple. Mettez à jour l'URL de base dans vos requêtes axios pour pointer vers le véritable backend, et votre application devrait fonctionner de manière transparente sans aucun changement dans la structure.

Conclusion

Utiliser MockAPI.io avec Next.js est un excellent moyen de créer et de tester votre application frontend même lorsque le backend est toujours en cours. En simulant de véritables interactions API, vous pouvez faire avancer le développement du frontend et assurer une transition en douceur une fois le backend réel terminé.

Que vous travailliez au sein d'une grande équipe ou sur un projet solo, MockAPI.io est un outil précieux pour les développeurs frontend. Commencez à l'utiliser dès aujourd'hui pour rationaliser votre processus de développement !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!