バックエンドの準備ができていない場合に Next.js アプリで MockAPI を使用する方法

フロントエンド開発者としては、フロントエンドを完全に実装する前に、バックエンドが 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」などのリソースを定義します:

[リソースの追加] をクリックし、「ユーザー」という名前を付けます。
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 (
    <div>
      <h1 id="User-List">User List</h1>
      <ul>
        {users.map((user) => (
          <li key="{user.id}">
            <img src="%7Buser.avatar%7D" alt="{`${user.name}'s" avatar    style="max-width:90%">
            {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;

この例では:

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 (
    <div>
      <h1 id="Add-New-User">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;

フォームを送信すると、MockAPI で新しいユーザーが作成されます。

7.本物のバックエンドへの移行
実際のバックエンドの準備ができたら、モック API を置き換えるのは簡単です。実際のバックエンドを指すように axios リクエストのベース URL を更新すると、アプリは構造を変更することなくシームレスに動作するはずです。

結論

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

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

以上がバックエンドの準備ができていない場合に Next.js アプリで MockAPI を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。