Фронтенд-разработчику часто приходится ждать, пока бэкэнд завершит работу над его API, прежде чем вы сможете полностью реализовать фронтенд. К счастью, такие инструменты, как MockAPI.io, могут помочь вам смоделировать работающий бэкэнд, позволяя без задержек приступить к написанию клиентской части вашего приложения.

В этом посте мы рассмотрим, как интегрировать MockAPI.io в новое приложение Next.js для имитации серверных данных, пока настоящий сервер находится в стадии разработки.

Что такое MockAPI.io?

MockAPI.io — это простая в использовании платформа, которая позволяет разработчикам создавать макеты REST API. С помощью этого инструмента вы можете моделировать реальные конечные точки API, определять ресурсы (модели данных) и тестировать свое приложение без необходимости использования реального бэкэнда. Это особенно полезно для фронтенд-разработки и прототипирования.

Зачем использовать MockAPI.io?

Работайте независимо: вам не нужно ждать завершения внутренней разработки, прежде чем приступить к работе над внешним интерфейсом.
Более быстрые итерации: позволяют быстро моделировать конечные точки и тестировать различные сценарии.
Моделирование API: вы можете моделировать структуру реального API, делая переход к фактическому серверному интерфейсу плавным, когда он будет готов.
Отлично подходит для совместной работы: позволяет тесно сотрудничать с серверными разработчиками, определяя ожидаемые структуры API.

Пошаговое руководство: настройка MockAPI.io с помощью приложения Next.js

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 автоматически сгенерирует для вас поддельные пользовательские данные.
Теперь у вас будет список конечных точек API, например:

GET /users — получить всех пользователей.
POST /users — Создать нового пользователя.
PUT /users/{id} — обновить пользователя.
DELETE /users/{id} — удалить пользователя.
Базовый URL-адрес вашего API будет выглядеть примерно так: https://mockapi.io/projects/{your_project_id}/users.

4. Получение данных из MockAPI в Next.js
Теперь, когда у вас есть макет API, вы можете интегрировать его в свое приложение Next.js, используя getServerSideProps или getStaticProps Next.js. Давайте получим данные из конечной точки /users и отобразим их в приложении.

Вот как вы можете использовать getServerSideProps в проекте Next.js для получения пользовательских данных из MockAPI.io.

Создайте новую страницу в 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 выполняет запрос на стороне сервера для получения пользовательских данных из конечной точки фиктивного API.
Список пользователей отображается с изображениями профиля, именами и адресами электронной почты.

5. Проверьте интеграцию Mock API
Запустите сервер разработки, чтобы проверить интеграцию:

npm run dev

Перейдите по адресу http://localhost:3000/users, и вы увидите список пользователей, полученный из MockAPI.io, который отображается в вашем приложении Next.js.

6. Добавление новых функций: создание пользователя
Давайте добавим функцию, позволяющую создать нового пользователя через форму в вашем приложении Next.js. Мы отправим запрос POST на конечную точку MockAPI.

Создайте компонент формы в 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. Переход на настоящий бэкенд
Как только ваш фактический бэкэнд будет готов, заменить макет API будет просто. Обновите базовый URL-адрес в ваших запросах axios, чтобы он указывал на реальный бэкэнд, и ваше приложение должно работать без проблем без каких-либо изменений в структуре.

Заключение

Использование MockAPI.io с Next.js — отличный способ создать и протестировать интерфейсное приложение, даже когда серверная часть еще находится в работе. Моделируя реальные взаимодействия API, вы можете продолжить разработку внешнего интерфейса и обеспечить плавный переход после завершения фактического внутреннего интерфейса.

Работаете ли вы над большой командой или над индивидуальным проектом, MockAPI.io — ценный инструмент для разработчиков интерфейса. Начните использовать его сегодня, чтобы оптимизировать процесс разработки!