Como desenvolvedor front-end, é comum esperar que o back-end conclua suas APIs antes de poder implementar totalmente o front-end. Felizmente, ferramentas como MockAPI.io podem ajudá-lo a simular um back-end funcional, permitindo que você prossiga com a codificação da parte front-end do seu aplicativo sem atrasos.

Nesta postagem do blog, exploraremos como integrar MockAPI.io em um novo aplicativo Next.js para simular dados de back-end enquanto o back-end real está em desenvolvimento.

O que é MockAPI.io?

MockAPI.io é uma plataforma fácil de usar que permite aos desenvolvedores criar APIs REST simuladas. Com esta ferramenta, você pode simular endpoints de API reais, definir recursos (modelos de dados) e testar seu aplicativo sem precisar de um back-end real. É especialmente útil para desenvolvimento de front-end e prototipagem.

Por que usar MockAPI.io?

Trabalhar de forma independente: você não precisa esperar que o desenvolvimento do backend seja concluído antes de começar a trabalhar no frontend.
Iterações mais rápidas: permite simular rapidamente endpoints e testar diferentes cenários.
Simulação de API: você pode simular a estrutura da API real, facilitando a mudança para o back-end real quando estiver pronto.
Ótimo para colaboração: permite que você trabalhe em estreita colaboração com desenvolvedores de back-end, definindo estruturas de API esperadas.

Guia passo a passo: configurando MockAPI.io com um aplicativo Next.js

1. Crie um novo aplicativo Next.js
Primeiro, vamos criar um novo projeto Next.js. Execute o seguinte comando para inicializar o aplicativo:

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

Mova para o diretório do seu projeto:

cd mockapi-nextjs-app

Inicie o servidor de desenvolvimento para garantir que tudo esteja configurado corretamente:

npm run dev

Seu aplicativo agora deve estar sendo executado em http://localhost:3000.

2. Crie uma conta MockAPI.io
Em seguida, inscreva-se em MockAPI.io se ainda não tiver uma conta. Uma vez logado, você pode criar um novo projeto clicando no botão Criar Novo Projeto.

3. Crie um recurso (ponto final)
Depois que seu projeto for criado, defina um recurso, como "Usuários":

Clique em Adicionar recurso e nomeie-o como "Usuários".
Defina propriedades como id, nome, email e avatar (para fotos de perfil de usuário).
MockAPI.io irá gerar automaticamente alguns dados de usuário falsos para você.
Agora você terá uma lista de endpoints de API como:

GET /users - Obtenha todos os usuários.
POST /users - Crie um novo usuário.
PUT /users/{id} - Atualize um usuário.
DELETE /users/{id} - Exclui um usuário.
O URL base da sua API será semelhante a https://mockapi.io/projects/{your_project_id}/users.

4. Buscar dados do MockAPI em Next.js
Agora que você tem sua API simulada, pode integrá-la ao seu aplicativo Next.js usando getServerSideProps ou getStaticProps do Next.js. Vamos buscar dados do endpoint /users e exibi-los no aplicativo.

Veja como você pode usar getServerSideProps no projeto Next.js para buscar dados do usuário em MockAPI.io.

Crie uma nova página em 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;

Neste exemplo:

getServerSideProps faz uma solicitação do lado do servidor para buscar dados do usuário do endpoint simulado da API.
A lista de usuários é renderizada com fotos de perfil, nomes e e-mails.

5. Teste a integração da API simulada
Execute o servidor de desenvolvimento para testar a integração:

npm run dev

Navegue para http://localhost:3000/users e você verá uma lista de usuários obtidos de MockAPI.io exibida em seu aplicativo Next.js.

6. Adicionando novos recursos: crie um usuário
Vamos adicionar um recurso onde você pode criar um novo usuário por meio de um formulário em seu aplicativo Next.js. Enviaremos uma solicitação POST para o endpoint MockAPI.

Crie um componente de formulário em 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;

Agora, ao enviar o formulário, um novo usuário será criado no MockAPI.

7. Transição para o backend real
Assim que seu back-end real estiver pronto, substituir a API simulada será simples. Atualize o URL base em suas solicitações de axios para apontar para o back-end real, e seu aplicativo deverá funcionar perfeitamente, sem quaisquer alterações na estrutura.

Conclusão

Usar MockAPI.io com Next.js é uma excelente maneira de construir e testar seu aplicativo frontend mesmo quando o backend ainda está em andamento. Ao simular interações reais de API, você pode manter o desenvolvimento do front-end avançando e garantir uma transição tranquila assim que o back-end real for concluído.

Esteja você trabalhando em uma equipe grande ou em um projeto solo, MockAPI.io é uma ferramenta valiosa para desenvolvedores front-end. Comece a usá-lo hoje para agilizar seu processo de desenvolvimento!