Como desarrollador frontend, es común encontrarse esperando que el backend complete sus API antes de poder implementar completamente el frontend. Afortunadamente, herramientas como MockAPI.io pueden ayudarte a simular un backend funcional, permitiéndote continuar con la codificación de la parte frontend de tu aplicación sin demoras.

En esta publicación de blog, exploraremos cómo integrar MockAPI.io en una nueva aplicación Next.js para simular los datos del backend mientras el backend real está en desarrollo.

¿Qué es MockAPI.io?

MockAPI.io es una plataforma fácil de usar que permite a los desarrolladores crear API REST simuladas. Con esta herramienta, puede simular puntos finales de API reales, definir recursos (modelos de datos) y probar su aplicación sin necesidad de un backend real. Es especialmente útil para el desarrollo frontend y la creación de prototipos.

¿Por qué utilizar MockAPI.io?

Trabaja de forma independiente: no necesitas esperar a que finalice el desarrollo del backend antes de comenzar a trabajar en el frontend.
Iteraciones más rápidas: le permite simular rápidamente puntos finales y probar diferentes escenarios.
Simulación de API: Puede simular la estructura de la API real, haciendo que el cambio al backend real sea fluido cuando esté listo.
Excelente para la colaboración: le permite trabajar estrechamente con los desarrolladores backend definiendo las estructuras API esperadas.

Guía paso a paso: configurar MockAPI.io con una aplicación Next.js

1. Crear una nueva aplicación Next.js
Primero, creemos un nuevo proyecto Next.js. Ejecute el siguiente comando para inicializar la aplicación:

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

Mover al directorio de tu proyecto:

cd mockapi-nextjs-app

Inicie el servidor de desarrollo para asegurarse de que todo esté configurado correctamente:

npm run dev

Tu aplicación ahora debería estar ejecutándose en http://localhost:3000.

2. Crear una cuenta MockAPI.io
A continuación, regístrese en MockAPI.io si aún no tiene una cuenta. Una vez que haya iniciado sesión, puede crear un nuevo proyecto haciendo clic en el botón Crear nuevo proyecto.

3. Crear un recurso (punto final)
Una vez creado su proyecto, defina un recurso, como "Usuarios":

Haga clic en Agregar recurso y asígnele el nombre "Usuarios".
Defina propiedades como identificación, nombre, correo electrónico y avatar (para imágenes de perfil de usuario).
MockAPI.io generará automáticamente algunos datos de usuario falsos para usted.
Ahora tendrá una lista de puntos finales de API como:

GET /users - Obtener todos los usuarios.
POST /usuarios: crea un nuevo usuario.
PUT /users/{id} - Actualizar un usuario.
DELETE /users/{id} - Eliminar un usuario.
La URL base de su API se verá así: https://mockapi.io/projects/{your_project_id}/users.

4. Obtener datos de MockAPI en Next.js
Ahora que tiene su API simulada, puede integrarla en su aplicación Next.js usando getServerSideProps o getStaticProps de Next.js. Busquemos datos del punto final /users y mostrémoslos en la aplicación.

A continuación se explica cómo puede utilizar getServerSideProps en el proyecto Next.js para obtener datos de usuario de MockAPI.io.

Crear una nueva página en páginas/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;

En este ejemplo:

getServerSideProps realiza una solicitud del lado del servidor para recuperar datos del usuario desde el punto final API simulado.
La lista de usuarios se presenta con imágenes de perfil, nombres y correos electrónicos.

5. Pruebe la integración de API simulada
Ejecute el servidor de desarrollo para probar la integración:

npm run dev

Navega a http://localhost:3000/users y deberías ver una lista de usuarios obtenidos de MockAPI.io en tu aplicación Next.js.

6. Agregar nuevas funciones: crear un usuario
Agreguemos una función donde puede crear un nuevo usuario a través de un formulario en su aplicación Next.js. Enviaremos una solicitud POST al punto final de MockAPI.

Crear un componente de formulario en páginas/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;

Ahora, cuando envíe el formulario, se creará un nuevo usuario en MockAPI.

7. Transición al backend real
Una vez que su backend real esté listo, reemplazar la API simulada es simple. Actualice la URL base en sus solicitudes de axios para que apunte al backend real y su aplicación debería funcionar sin problemas sin ningún cambio en la estructura.

Conclusión

Usar MockAPI.io con Next.js es una excelente manera de crear y probar su aplicación frontend incluso cuando el backend aún está en progreso. Al simular interacciones API reales, puede mantener el desarrollo del frontend avanzando y garantizar una transición fluida una vez que se complete el backend real.

Ya sea que esté trabajando en un equipo grande o en un proyecto en solitario, MockAPI.io es una herramienta valiosa para los desarrolladores frontend. ¡Empiece a usarlo hoy para optimizar su proceso de desarrollo!