フロントエンド開発者としては、フロントエンドを完全に実装する前に、バックエンドが API を完了するのを待っていることに気づくのが一般的です。幸いなことに、MockAPI.io のようなツールは、動作するバックエンドをシミュレートするのに役立ち、遅延することなくアプリケーションのフロントエンド部分のコーディングを進めることができます。

このブログ投稿では、MockAPI.io を新しい Next.js アプリに統合して、実際のバックエンドが開発中にバックエンド データを模擬する方法を検討します。

MockAPI.ioとは何ですか?

MockAPI.io は、開発者がモック REST API を作成できるようにする使いやすいプラットフォームです。このツールを使用すると、実際のバックエンドを必要とせずに、実際の API エンドポイントをシミュレートし、リソース (データ モデル) を定義し、アプリケーションをテストできます。これは、フロントエンド開発とプロトタイピングに特に役立ちます。

MockAPI.io を使用する理由

独立して作業する: フロントエンドの作業を開始する前に、バックエンドの開発が完了するのを待つ必要はありません。
反復の高速化: エンドポイントを迅速にモックし、さまざまなシナリオをテストできます。
API シミュレーション: 実際の API の構造をシミュレートし、準備ができたら実際のバックエンドにスムーズに切り替えることができます。
コラボレーションに最適: 予想される API 構造を定義することで、バックエンド開発者と緊密に連携できます。

ステップバイステップ ガイド: Next.js アプリを使用した MockAPI.io のセットアップ

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.リソース(エンドポイント)の作成
プロジェクトが作成されたら、「Users」:

[リソースの追加] をクリックし、「Users」という名前を付けます。
ID、名前、電子メール、アバター (ユーザー プロフィール写真用) などのプロパティを定義します。
MockAPI.io は偽のユーザー データを自動生成します。
次のような API エンドポイントのリストが表示されます:

GET /users - すべてのユーザーを取得します。
POST /users - 新しいユーザーを作成します。
PUT /users/{id} - ユーザーを更新します。
DELETE /users/{id} - ユーザーを削除します。
API のベース URL は、https://mockapi.io/projects/{your_project_id}/users.

4. Next.js
の MockAPI からデータを取得する モック API を作成したので、Next.js の getServerSideProps または getStaticProps を使用して、それを Next.js アプリに統合できます。 /users エンドポイントからデータを取得して、アプリに表示しましょう。

Next.js プロジェクトで getServerSideProps を使用して 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.モック 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 を置き換えるのは簡単です。実際のバックエンドを指すように axios リクエストのベース URL を更新すると、アプリは構造を変更することなくシームレスに動作するはずです。

結論

MockAPI.io と Next.js を使用することは、バックエンドがまだ進行中の場合でも、フロントエンド アプリケーションを構築してテストするための優れた方法です。実際の API インタラクションをシミュレートすることで、フロントエンドの開発を進め続け、実際のバックエンドが完了した後のスムーズな移行を確実に行うことができます。

大規模なチームで作業している場合でも、個人プロジェクトで作業している場合でも、MockAPI.io はフロントエンド開発者にとって貴重なツールです。開発プロセスを合理化するために今すぐ使い始めてください!