Cara Menggunakan MockAPI dengan Apl Next.js Apabila Bahagian Belakang Belum Sedia

Sebagai pembangun bahagian hadapan, adalah perkara biasa untuk mendapati diri anda menunggu di bahagian belakang untuk melengkapkan APInya sebelum anda boleh melaksanakan sepenuhnya bahagian hadapan. Nasib baik, alatan seperti MockAPI.io boleh membantu anda mensimulasikan bahagian belakang yang berfungsi, membolehkan anda meneruskan pengekodan bahagian hadapan aplikasi anda tanpa berlengah-lengah.

Dalam catatan blog ini, kami akan meneroka cara mengintegrasikan MockAPI.io ke dalam apl Next.js baharu untuk mengejek data hujung belakang semasa bahagian belakang sebenar sedang dibangunkan.

Apakah MockAPI.io?

MockAPI.io ialah platform yang mudah digunakan yang membolehkan pembangun mencipta API REST olok-olok. Dengan alat ini, anda boleh mensimulasikan titik akhir API sebenar, menentukan sumber (model data) dan menguji aplikasi anda tanpa memerlukan bahagian belakang sebenar. Ia amat berguna untuk pembangunan bahagian hadapan dan prototaip.

Mengapa Menggunakan MockAPI.io?

Bekerja Secara Bebas: Anda tidak perlu menunggu pembangunan bahagian belakang selesai sebelum anda mula bekerja pada bahagian hadapan.
Lelaran Lebih Pantas: Ia membolehkan anda mengejek titik akhir dengan cepat dan menguji senario yang berbeza.
Simulasi API: Anda boleh mensimulasikan struktur API sebenar, menjadikan suis ke bahagian belakang sebenar lancar apabila sudah sedia.
Hebat untuk Kerjasama: Membolehkan anda bekerja rapat dengan pembangun bahagian belakang dengan mentakrifkan struktur API yang dijangkakan.

Panduan Langkah demi Langkah: Menyediakan MockAPI.io dengan Apl Next.js

1. Cipta Apl Next.js Baharu
Mula-mula, mari buat projek Next.js baharu. Jalankan arahan berikut untuk memulakan apl:

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

Alih ke direktori projek anda:

cd mockapi-nextjs-app

Mulakan pelayan pembangunan untuk memastikan semuanya disediakan dengan betul:

npm run dev

Apl anda kini sepatutnya berjalan pada http://localhost:3000.

2. Buat Akaun MockAPI.io
Seterusnya, daftar di MockAPI.io jika anda belum mempunyai akaun. Setelah log masuk, anda boleh mencipta projek baharu dengan mengklik butang Cipta Projek Baharu.

3. Cipta Sumber (Titik Akhir)
Setelah projek anda dibuat, tentukan sumber, seperti "Pengguna":

Klik Tambah Sumber dan namakannya "Pengguna".
Tentukan sifat seperti id, nama, e-mel dan avatar (untuk gambar profil pengguna).
MockAPI.io akan menjana beberapa data pengguna palsu secara automatik untuk anda.
Anda kini akan mempunyai senarai titik akhir API seperti:

DAPATKAN /pengguna - Dapatkan semua pengguna.
POST /users - Buat pengguna baharu.
PUT /users/{id} - Kemas kini pengguna.
DELETE /users/{id} - Padamkan pengguna.
URL asas untuk API anda akan kelihatan seperti https://mockapi.io/projects/{your_project_id}/users.

4. Ambil Data daripada MockAPI dalam Next.js
Memandangkan anda mempunyai API palsu anda, anda boleh menyepadukannya ke dalam apl Next.js anda menggunakan getServerSideProps Next.js atau getStaticProps. Mari ambil data dari titik akhir /users dan paparkannya dalam apl.

Begini cara anda boleh menggunakan getServerSideProps dalam projek Next.js untuk mengambil data pengguna daripada MockAPI.io.

Buat halaman baharu dalam 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;

Dalam contoh ini:

getServerSideProps membuat permintaan sebelah pelayan untuk mengambil data pengguna daripada titik akhir API palsu.
Senarai pengguna dipaparkan dengan gambar profil, nama dan e-mel.

5. Uji Integrasi API Mock
Jalankan pelayan pembangunan untuk menguji penyepaduan:

npm run dev

Navigasi ke http://localhost:3000/users, dan anda akan melihat senarai pengguna yang diambil daripada MockAPI.io dipaparkan dalam apl Next.js anda.

6. Menambah Ciri Baharu: Buat Pengguna
Mari tambahkan ciri yang membolehkan anda membuat pengguna baharu melalui borang dalam apl Next.js anda. Kami akan menghantar permintaan POST ke titik akhir MockAPI.

Buat komponen borang dalam 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;

Kini, apabila anda menyerahkan borang, pengguna baharu akan dibuat dalam MockAPI.

7. Peralihan ke Bahagian Belakang Sebenar
Setelah bahagian belakang sebenar anda sudah sedia, menggantikan API olok-olok adalah mudah. Kemas kini URL asas dalam permintaan axios anda untuk menghala ke bahagian belakang sebenar dan apl anda harus berfungsi dengan lancar tanpa sebarang perubahan dalam struktur.

Kesimpulan

Menggunakan MockAPI.io dengan Next.js ialah cara terbaik untuk membina dan menguji aplikasi bahagian hadapan anda walaupun semasa bahagian belakang masih dalam proses. Dengan mensimulasikan interaksi API sebenar, anda boleh memastikan pembangunan bahagian hadapan bergerak ke hadapan dan memastikan peralihan yang lancar setelah bahagian belakang sebenar selesai.

Sama ada anda bekerja dalam pasukan yang besar atau projek solo, MockAPI.io ialah alat yang berharga untuk pembangun bahagian hadapan. Mula menggunakannya hari ini untuk menyelaraskan proses pembangunan anda!

Atas ialah kandungan terperinci Cara Menggunakan MockAPI dengan Apl Next.js Apabila Bahagian Belakang Belum Sedia. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!