Next.js の JSON サーバー 知っておくべきことすべて

このガイドでは、JSON サーバーを利用してモック API を作成し、それを TypeScript で構築された Next.js 15 アプリケーションにシームレスに統合する方法を説明します。 セットアップについて説明し、各 HTTP メソッド (GET、POST、PUT、DELETE) を実際の例で説明し、データ取得のための Next.js 15 の新しい use 機能の使用法を強調します。

JSON サーバーについて

JSON サーバーは、単純な JSON ファイルを使用して RESTful API の作成を簡素化します。その主な機能は次のとおりです:

• CRUD 操作: データ管理のための GET、POST、PUT、および DELETE リクエストをサポートします。
• 動的ルーティング: より複雑な API 構造に合わせてエンドポイントをカスタマイズできます。
• 使いやすさ: 開始するために必要なセットアップと構成は最小限です。

Next.js 15 で JSON サーバーを使用する理由

この組み合わせにはいくつかの利点があります:

• フロントエンド中心の開発: バックエンドが完全に開発される前に、UI コンポーネントを構築して改良します。
• ラピッド プロトタイピング: バックエンド統合に依存せずに、機能を迅速にテストして反復します。
• カスタマイズ可能な API シミュレーション: さまざまなバックエンドの動作を簡単に模倣して徹底的なテストを行います。

JSON サーバーのセットアップ

1. JSON サーバーのインストール

Next.js プロジェクト内の開発依存関係として JSON サーバーをインストールします:

<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: データを削除します

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 サーバーは Next.js 15 フロントエンド開発にとって貴重な資産であり、API をモックして開発を大幅に加速するためのシンプルかつ効果的な手段を提供します。 すべての HTTP メソッドのこれらの例により、JSON サーバーをプロジェクトにシームレスに統合できます。

以上がNext.js の JSON サーバー 知っておくべきことすべての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。