Zod peut implémenter le routage de l'API de type sécurisé dans next.js. Tout d'abord, définissez le schéma de la demande et de la réponse, puis vérifiez et injectez le type via la fonction d'ordre supérieur, et utilisez enfin cette encapsulation dans le routage pour garantir que l'entrée et la sortie sont vérifiées. Le schéma peut également être réutilisé pour générer des types frontaux pour assurer la cohérence. 1. Définir le corps de la demande de vérification du schéma, les paramètres de requête et la structure de réponse; 2. Créez la fonction de retenue de remise pour analyser et taper automatiquement la demande; 3. Appliquer cette fonction dans le routage de l'API pour obtenir la sécurité de type complet; 4. Vérifiez éventuellement le corps de réponse et encapsulez la fonction de l'outil; 5. Le front-end importe directement les types générés par ZOD pour s'assurer que les types frontaux et back-end sont cohérents, améliorant ainsi l'expérience de développement et la qualité du projet.

Next.js facilite la création d'applications complètes, mais par défaut, le routage de l'API est de type faible - vous pouvez facilement faire des erreurs dans l'analyse du corps, les paramètres de requête ou les formats de réponse. Combiné avec ZOD, vous pouvez implémenter le routage API entièrement sécurisé, avec des vérifications de compilation et des invites automatiques des demandes aux réponses.

Voici un moyen pratique de mettre en ?uvre le routage de l'API de type type à l'aide de zod dans next.js.

? schéma qui définit les demandes et les réponses

Le noyau de ZOD est de définir des structures de données vérifiables. Pour le routage des API, nous devons généralement vérifier:

• Paramètres de requête ( query )
• Demander le corps ( body )
• response

 // lib / schémas / userschema.ts
import {z} de 'zod';

Export const CreateUserschema = z.object ({
  corps: z.object ({
    Nom: Z.String (). Min (1),
    Email: z.string (). e-mail (),
  }),
  requête: z.object ({
    apikey: z.string (). min (1),
  }).facultatif(),
});

Type d&#39;exportation createUserInput = z.infer <typeof CreateUsSchema>;

Ce schéma définit la structure requise par Post /api/users .

? ? Créer un processeur API à sécurité type

Nous encapsulons une fonction d'ordre supérieur, analyse automatiquement et tapent req.body et req.query .

 // lib / api / handler.ts
import {NextAPirequest, NextAPiRESPONSE} de ?Next?;
import {zodschema, zoDerror} de 'zod';

Type Handler <T> = (
  req: nextAPirequest & {body: t [&#39;body&#39;]; requête: t [&#39;query&#39;]},
  Res: NextAPiRESPONSE
) => Promesse <nud> | vide;

Fonction d&#39;exportation Wattvalidation <T étend {Body ?: Any; requête ?: Any}> (
  schéma: zodschema <t>,
  Handler: Handler <T>
) {
  return async (req: nextapirequest, res: nextapirsonSon) => {
    essayer {
      const data = schema.parse ({
        corps: req.method! == &#39;get&#39;? Req.Body: Undefined,
        requête: req.query,
      });

      Handler de retour (req comme n&#39;importe quel, res);
    } catch (erreur) {
      if (instance d&#39;erreur de zoderror) {
        return res.status (400) .json ({{
          Erreur: ?échec de la validation?,
          Détails: Error.errors,
        });
      }
      return res.status (500) .json ({error: &#39;Internal Server Error&#39;});
    }
  };
}

Cette fonction withValidation sera:

• Vérifiez l'entrée
• "Injecter" les types body et query corrects au niveau du type
• Cattrez l'erreur Zod et retournez 400

? Utilisation réelle: routage de l'API à sécurité type

 // pages / api / users.ts
import {NextAPirequest, NextAPiRESPONSE} de ?Next?;
import {witchvalidation} de '@ / lib / api / handler';
import {CreateUSerschema} à partir de '@ / lib / schémas / userschema';

Exportation par défaut de difficulté (
  CreateUserschema,
  Async Fonction CreateUser (
    req: nextAPirequest & {body: {name: String; Email: cha?ne}},
    Res: NextAPiRESPONSE
  ) {
    const {nom, email} = req.body;

    // ici Type Sécurité: le nom et le courrier électronique ont été garantis d'être cha?ne par Zod
    // peut être inséré en toute sécurité dans la base de données ...

    return res.status (201) .json ({{{{
      ID: '123',
      nom,
      e-mail,
    });
  }
));

Maintenant:

• Si le front-end passe name: null , il sera rejeté par Zod
• Dans VS Code, req.body. aura un achèvement automatique complet
• Tout accès à req.body.phone rapportera une erreur (sauf si le schéma est défini)

? Facultatif: Vérification de la réponse du format de réponse unifiée

En allant plus loin, vous pouvez également vérifier la sortie pour empêcher le retour inattendu des champs sensibles:

 const CreateResponSeschema = z.object ({{
  id: z.string (),
  Nom: z.string (),
  e-mail: z.string (),
});

// const result = {id: '123', nom, e-mail};
const Parised = CreateResponSeschema.Parse (résultat); // Assurez-vous que la structure de sortie est correcte RETOUR RES.STatus (201) .json (analysé);

Vous pouvez même encapsuler une fonction d'outil validResponse(schema, data) .

? Conseils: réutiliser les types frontaux

Le schéma ZOD peut générer des types de typeScript, de sorte que le frontal peut importer directement:

 // Composant frontend
importer type {createUserInput} à partir de '@ / lib / schémas / userschema';

const Data: CreateUserInput ['body'] = {
  Nom: ?Alice?,
  Courriel: ?Alice@example.com?,
}; // Les types sont exactement les mêmes, et vous n'avez pas à vous soucier du champ de changement de backend

Fondamentalement, c'est tout. Avec une petite quantité d'encapsulation ZOD, le routage de l'API suivant peut être obtenu:

• Vérification automatique des paramètres du corps / de la requête de la demande
• Type de liaison complète Sécurité
• Meilleure expérience de développement (complétion automatique, rapport des erreurs précoces)
• Réduire les erreurs d'exécution

Pas compliqué, mais cela peut considérablement améliorer la qualité du projet.

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!