フロントエンド開発者としては、フロントエンドを完全に実装する前に、バックエンドが API を完了するのを待っていることに気づくのが一般的です。幸いなことに、MockAPI.io のようなツールは、動作するバックエンドをシミュレートするのに役立ち、遅延することなくアプリケーションのフロントエンド部分のコーディングを進めることができます。
このブログ投稿では、MockAPI.io を新しい Next.js アプリに統合して、実際のバックエンドが開発中にバックエンド データを模擬する方法を検討します。
MockAPI.io は、開発者がモック REST API を作成できるようにする使いやすいプラットフォームです。このツールを使用すると、実際のバックエンドを必要とせずに、実際の API エンドポイントをシミュレートし、リソース (データ モデル) を定義し、アプリケーションをテストできます。これは、フロントエンドの開発とプロトタイピングに特に役立ちます。
独立して作業する: フロントエンドでの作業を開始する前に、バックエンドの開発が完了するのを待つ必要はありません。
反復の高速化: エンドポイントを迅速にモックし、さまざまなシナリオをテストできます。
API シミュレーション: 実際の API の構造をシミュレートし、準備ができたら実際のバックエンドにスムーズに切り替えることができます。
コラボレーションに最適: 予想される API 構造を定義することで、バックエンド開発者と緊密に連携できます。
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>User List</h1> <ul> {users.map((user) => ( <li key={user.id}> <img src={user.avatar} alt={`${user.name}'s avatar`} width="50" /> {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>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 サイトの他の関連記事を参照してください。