Serveur JSON pour Next.js : tout ce que vous devez savoir

Ce guide montre comment exploiter JSON Server pour créer une API fictive et l'intégrer de manière transparente dans une application Next.js 15 créée avec TypeScript. Nous couvrirons la configuration, illustrerons chaque méthode HTTP (GET, POST, PUT, DELETE) avec des exemples pratiques et mettrons en évidence l'utilisation de la nouvelle use fonctionnalité de Next.js 15 pour la récupération de données.

Comprendre le serveur JSON

JSON Server simplifie la création d'API RESTful à l'aide d'un simple fichier JSON. Ses principales fonctionnalités incluent :

• Opérations CRUD : Prend en charge les requêtes GET, POST, PUT et DELETE pour la gestion des données.
• Routage dynamique : Permet la personnalisation des points de terminaison pour des structures d'API plus complexes.
• Convivialité : Installation et configuration minimales requises pour commencer.

Pourquoi JSON Server avec Next.js 15 ?

Cette combinaison offre plusieurs avantages :

• Développement axé sur le frontend : Créez et affinez vos composants d'interface utilisateur avant que le backend ne soit entièrement développé.
• Prototypage rapide : Testez et itérez rapidement sur les fonctionnalités sans compter sur l'intégration backend.
• Simulation d'API personnalisable : Imitez sans effort divers comportements du backend pour des tests approfondis.

Configuration du serveur JSON

1. Installation du serveur JSON

Installez JSON Server en tant que dépendance de développement au sein de votre projet Next.js :

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

2. Création du fichier de base de données

Créez un fichier db.json dans le répertoire racine de votre projet :

<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. Configuration du serveur JSON

Ajoutez un script à votre package.json pour lancer le serveur :

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

Utiliser --delay

Le drapeau --delay simule la latence du réseau, utile pour tester les états de chargement :

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

Cela introduit un délai d'une seconde. Démarrez le serveur en utilisant :

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

Votre API sera accessible sur http://localhost:4000.

Travailler avec les méthodes HTTP

1. GET : Récupération de données

La méthode GET récupère les données. Voici comment récupérer des utilisateurs :

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

Explication :

• fetchUsers : récupère de manière asynchrone les données utilisateur.
• use : Un hook Next.js 15 pour la récupération de données côté serveur.

2. POST : Ajout de données

La méthode POST crée de nouveaux enregistrements :

<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 : Mise à jour des données

La méthode PUT modifie les enregistrements existants :

<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. SUPPRIMER : suppression de données

La méthode DELETE supprime les enregistrements :

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

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

Bonnes pratiques

• Gestion des ports : Utilisez un port non conflictuel (évitez le 3000 par défaut de Next.js).
• Gestion robuste des erreurs : Implémentez une gestion complète des erreurs dans tous les appels d'API.
• Saisie TypeScript : Définissez les types de données pour une sécurité de type améliorée.
• Variables d'environnement : Stockez les URL d'API dans des .env fichiers pour une meilleure gestion de la configuration.
• Simulation de latence : Utilisez --delay pour tester les états de chargement et simuler des conditions de réseau plus lentes.

Conclusion

JSON Server est un atout précieux pour le développement frontend de Next.js 15, fournissant un moyen simple mais efficace de simuler les API et d'accélérer considérablement le développement. Ces exemples pour toutes les méthodes HTTP vous permettent d'intégrer JSON Server de manière transparente dans vos projets.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!