Next.js 的 JSON 服务器您需要了解的一切

本指南演示了如何利用 JSON Server 创建模拟 API 并将其无缝集成到使用 TypeScript 构建的 Next.js 15 应用程序中。 我们将介绍设置，通过实际示例说明每个 HTTP 方法（GET、POST、PUT、DELETE），并重点介绍 Next.js 15 的新 use 数据获取功能的使用。

了解 JSON 服务器

JSON Server 使用简单的 JSON 文件简化了 RESTful API 的创建。其主要特点包括：

• CRUD 操作： 支持 GET、POST、PUT 和 DELETE 请求来管理数据。
• 动态路由：允许自定义更复杂的 API 结构的端点。
• 用户友好性：开始所需的最少设置和配置。

为什么采用 Next.js 15 的 JSON 服务器？

这种组合有几个优点：

• 以前端为中心的开发：在后端完全开发之前构建和完善您的 UI 组件。
• 快速原型设计：快速测试和迭代功能，而不依赖后端集成。
• 可定制的 API 模拟： 轻松模仿各种后端行为以进行彻底的测试。

设置 JSON 服务器

1.安装 JSON 服务器

在 Next.js 项目中安装 JSON Server 作为开发依赖项：

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

2.创建数据库文件

在项目根目录中创建一个db.json文件：

<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.配置 JSON 服务器

将脚本添加到您的package.json以启动服务器：

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

使用--delay

--delay 标志模拟网络延迟，对于测试加载状态很有用：

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

这引入了 1 秒的延迟。 使用以下命令启动服务器：

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

您的 API 可以在 http://localhost:4000 访问。

使用 HTTP 方法

1. GET：检索数据

GET 方法获取数据。 以下是检索用户的方法：

<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>

说明：

• fetchUsers：异步获取用户数据。
• use：用于服务器端数据获取的 Next.js 15 挂钩。

2. POST：添加数据

POST 方法创建新记录：

<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：更新数据

PUT 方法修改现有记录：

<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.删除：删除数据

DELETE 方法删除记录：

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

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

最佳实践

• 端口管理： 使用不冲突的端口（避免 Next.js 的默认 3000）。
• 强大的错误处理：在所有 API 调用中实现全面的错误处理。
• TypeScript 键入： 定义数据类型以增强类型安全性。
• 环境变量： 将 API URL 存储在 .env 文件中，以便更好地进行配置管理。
• 延迟模拟：利用--delay测试加载状态并模拟较慢的网络条件。

结论

JSON Server 是 Next.js 15 前端开发的宝贵资产，提供了一种简单而有效的方法来模拟 API 并显着加速开发。 这些适用于所有 HTTP 方法的示例使您能够将 JSON Server 无缝集成到您的项目中。

以上是Next.js 的 JSON 服务器您需要了解的一切的详细内容。更多信息请关注PHP中文网其他相关文章！