JSON-Server for Next.js Semua Yang Anda Perlu Tahu

Panduan ini menunjukkan cara memanfaatkan Pelayan JSON untuk mencipta API palsu dan menyepadukannya dengan lancar ke dalam aplikasi Next.js 15 yang dibina dengan TypeScript. Kami akan merangkumi persediaan, menggambarkan setiap kaedah HTTP (GET, POST, PUT, DELETE) dengan contoh praktikal dan menyerlahkan penggunaan ciri use baharu Next.js 15 untuk pengambilan data.

Memahami Pelayan JSON

JSON Server memudahkan penciptaan API RESTful menggunakan fail JSON yang mudah. Ciri utamanya termasuk:

• Operasi CRUD: Menyokong permintaan GET, POST, PUT dan DELETE untuk mengurus data.
• Penghalaan Dinamik: Membenarkan penyesuaian titik akhir untuk struktur API yang lebih kompleks.
• Mesra Pengguna: Persediaan dan konfigurasi minimum diperlukan untuk bermula.

Mengapa JSON Server dengan Next.js 15?

Gabungan ini menawarkan beberapa kelebihan:

• Pembangunan Berfokuskan Depan: Bina dan perhalusi komponen UI anda sebelum bahagian belakang dibangunkan sepenuhnya.
• Prototaip Pantas: Uji dan ulangi ciri dengan pantas tanpa bergantung pada penyepaduan bahagian belakang.
• Simulasi API Boleh Disesuaikan: Tiru pelbagai gelagat bahagian belakang dengan mudah untuk ujian menyeluruh.

Menyediakan Pelayan JSON

1. Memasang Pelayan JSON

Pasang Pelayan JSON sebagai kebergantungan pembangunan dalam projek Next.js anda:

<code class="language-bash">npm install --save-dev json-server</code>

2. Mencipta Fail Pangkalan Data

Buat fail db.json dalam direktori akar projek anda:

<code class="language-json">{
  "users": [
    { "id": 1, "name": "John Doe", "email": "john@example.com" },
    { "id": 2, "name": "Jane Smith", "email": "jane@example.com" }
  ]
}</code>

3. Mengkonfigurasi Pelayan JSON

Tambahkan skrip pada package.json anda untuk melancarkan pelayan:

<code class="language-json">"scripts": {
  "json-server": "json-server --watch db.json --port 4000"
}</code>

Menggunakan --delay

Bendera --delay mensimulasikan kependaman rangkaian, berguna untuk menguji keadaan pemuatan:

<code class="language-json">"scripts": {
  "json-server": "json-server --watch db.json --port 4000 --delay 1000"
}</code>

Ini memperkenalkan kelewatan 1 saat. Mulakan pelayan menggunakan:

<code class="language-bash">npm run json-server</code>

API anda boleh diakses di http://localhost:4000.

Bekerja dengan Kaedah HTTP

1. DAPATKAN: Mendapatkan Data

Kaedah GET mengambil data. Begini cara untuk mendapatkan semula pengguna:

<code class="language-typescript">'use client';

import { use } from 'react';

async function fetchUsers() {
  const res = await fetch('http://localhost:4000/users');
  if (!res.ok) {
    throw new Error('Failed to fetch users');
  }
  return res.json();
}

export default function UsersPage() {
  const users = use(fetchUsers());

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user: { id: number; name: string }) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}</code>

Penjelasan:

• fetchUsers: Mengambil data pengguna secara tidak segerak.
• use: Cangkuk Next.js 15 untuk pengambilan data sebelah pelayan.

2. POST: Menambah Data

Kaedah POST mencipta rekod baharu:

<code class="language-typescript">'use client';
import { useState } from 'react';

export default function AddUser() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleAddUser = async () => {
    const res = await fetch('http://localhost:4000/users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name, email }),
    });

    if (res.ok) {
      alert('User added successfully!');
    }
  };

  return (
    <div>
      <h2>Add New User</h2>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      <button onClick={handleAddUser}>Add User</button>
    </div>
  );
}</code>

3. PUT: Mengemas kini Data

Kaedah PUT mengubah suai rekod sedia ada:

<code class="language-typescript">'use client';
import { useState } from 'react';

export default function UpdateUser() {
  // ... (similar to POST, but with an ID field and PUT request)
}</code>

4. PADAM: Memadam Data

Kaedah DELETE mengalih keluar rekod:

<code class="language-typescript">'use client';
import { useState } from 'react';

export default function DeleteUser() {
  // ... (similar to PUT, but with a DELETE request)
}</code>

Amalan Terbaik

• Pengurusan Port: Gunakan port tidak bercanggah (elakkan lalai Next.js 3000).
• Pengendalian Ralat Teguh: Laksanakan pengendalian ralat menyeluruh dalam semua panggilan API.
• Penaipan TypeScript: Tentukan jenis data untuk keselamatan jenis yang dipertingkatkan.
• Pembolehubah Persekitaran: Simpan URL API dalam .env fail untuk pengurusan konfigurasi yang lebih baik.
• Simulasi Latensi: Gunakan --delay untuk menguji keadaan pemuatan dan mensimulasikan keadaan rangkaian yang lebih perlahan.

Kesimpulan

JSON Server ialah aset berharga untuk pembangunan frontend Next.js 15, menyediakan cara yang mudah namun berkesan untuk mengejek API dan mempercepatkan pembangunan dengan ketara. Contoh ini untuk semua kaedah HTTP melengkapkan anda untuk menyepadukan Pelayan JSON dengan lancar ke dalam projek anda.

Atas ialah kandungan terperinci JSON-Server for Next.js Semua Yang Anda Perlu Tahu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!