Laluan API Jenis-selamat di Next.js dengan Zod

ZOD boleh melaksanakan penghalaan API jenis selamat di Next.Js. Pertama, tentukan skema permintaan dan tindak balas, kemudian sahkan dan suntikan jenis melalui fungsi pesanan yang lebih tinggi, dan akhirnya menggunakan enkapsulasi ini dalam penghalaan untuk memastikan input dan output disahkan. Skema juga boleh digunakan semula untuk menjana jenis front-end untuk memastikan konsistensi. 1. Tentukan badan permintaan pengesahan skema, parameter pertanyaan dan struktur tindak balas; 2. Buat fungsi WithValidation untuk menghuraikan dan menaip permintaan secara automatik; 3. Memohon fungsi ini dalam penghalaan API untuk mencapai keselamatan jenis penuh; 4. Secara pilihan mengesahkan badan tindak balas dan merangkum fungsi alat; 5. Front-end secara langsung mengimport jenis yang dihasilkan oleh ZOD untuk memastikan bahawa jenis depan dan belakang adalah konsisten, dengan itu meningkatkan pengalaman pembangunan dan kualiti projek.

Next.js membuat bangunan aplikasi lengkap mudah, tetapi secara lalai, penghalaan API adalah lemah-jenis-anda boleh membuat kesilapan dalam permintaan parsing badan, parameter pertanyaan, atau format tindak balas. Digabungkan dengan ZOD, anda boleh melaksanakan penghalaan API yang selamat jenis, dengan pemeriksaan masa kompilasi dan arahan automatik dari permintaan kepada respons.

Berikut adalah cara praktikal untuk melaksanakan penghalaan API selamat jenis menggunakan ZOD di Next.Js.

✅ Skema yang mentakrifkan permintaan dan tindak balas

Inti ZOD adalah untuk menentukan struktur data yang dapat disahkan. Untuk penghalaan API, biasanya kita perlu mengesahkan:

• Parameter pertanyaan ( query )
• Permintaan badan ( body )
• response

 // lib/skema/user userchema.ts
import {z} dari 'zod';

Export const createUsersChema = z.Object ({
  badan: z.object ({
    Nama: z.string (). min (1),
    E -mel: z.string (). e -mel (),
  }),
  pertanyaan: z.object ({
    Apikey: z.string (). min (1),
  }). Pilihan (),
});

jenis eksport createUserInput = z.Infer <typeof createUserschema>;

Skema ini mentakrifkan struktur yang diperlukan oleh pos /api/users .

? ️ Buat pemproses API jenis selamat

Kami merangkumi fungsi pesanan yang lebih tinggi, secara automatik Parses dan taip req.body dan req.query .

 // lib/api/handler.ts
import {nextapirequest, nextapiresponse} dari 'seterusnya';
import {zodschema, zoderror} dari 'zod';

Taipkan pengendali <t> = (
  req: nextapirequest & {body: t [&#39;body&#39;]; pertanyaan: t [&#39;query&#39;]},
  Res: NextApireSponse
) => Janji <void> | tidak sah;

Fungsi eksport dengan nilai <t meluas {body?: Any; pertanyaan?: mana -mana}> ((
  Skema: Zodschema <T>,
  Pengendali: Pengendali <T>
) {
  kembali async (req: nextapirequest, res: nextapiresponse) => {
    Cuba {
      const data = schema.parse ({
        badan: req.method! == &#39;get&#39;? req.body: undefined,
        pertanyaan: req.query,
      });

      Pengendali kembali (req sebagai mana -mana, res);
    } menangkap (ralat) {
      jika (kesilapan contoh zodError) {
        kembali res.status (400) .json ({
          Ralat: &#39;Pengesahan gagal&#39;,
          Butiran: error.errors,
        });
      }
      kembali res.status (500) .json ({error: &#39;ralat pelayan dalaman&#39;});
    }
  };
}

Fungsi withValidation ini akan:

• Sahkan input
• "Suntikan" body dan jenis query yang betul di peringkat jenis
• Menangkap ralat zod dan pulangan 400

? Penggunaan Sebenar: Routing API Jenis-selamat

 // Pages/API/Users.ts
import {nextapirequest, nextapiresponse} dari 'seterusnya';
import {withValidation} dari '@/lib/api/pengendali';
import {createUserschema} dari '@/lib/skema/user userschema';

Eksport Lalai WithValidation (
  createuserschema,
  Fungsi Async CreateUser (
    Req: NextApireQuest & {body: {name: string; E -mel: String}},
    Res: NextApireSponse
  ) {
    const {name, e -mel} = req.body;

    // Di sini Jenis Keselamatan: Nama dan E -mel telah dijamin menjadi rentetan oleh Zod
    // boleh dimasukkan dengan selamat ke dalam pangkalan data ...

    Return Res.Status (201) .json ({
      ID: '123',
      nama,
      e -mel,
    });
  }
);

Sekarang:

• Sekiranya front-end melewati name: null , ia akan ditolak oleh zod
• Dalam kod vs, req.body. akan mempunyai penyelesaian automatik yang lengkap
• Sebarang akses ke req.body.phone akan melaporkan ralat (kecuali skema ditakrifkan)

? Pilihan: Pengesahan tindak balas format tindak balas bersatu

Melangkah lebih jauh, anda juga boleh mengesahkan output untuk mengelakkan pulangan medan sensitif yang tidak dijangka:

 const createresponseschema = z.Object ({
  id: z.string (),
  Nama: Z.String (),
  E -mel: z.string (),
});

// const result = {id: '123', nama, e -mel};
const parsed = createresponseschema.parse (hasil); // pastikan struktur output adalah betul pulangan res.status (201) .json (parsed);

Anda juga boleh merangkumi fungsi alat validResponse(schema, data) .

? Petua: Gunakan semula jenis front-end

Skema ZOD boleh menjana jenis jenis, jadi bahagian depan boleh mengimport secara langsung:

 // Komponen frontend
jenis import {createuserinput} dari '@/lib/skema/user userschema';

Const Data: CreateUserInput ['body'] = {
  Nama: 'Alice',
  E -mel: 'alice@example.com',
}; // Jenisnya sama persis, dan anda tidak perlu bimbang tentang bidang perubahan backend

Pada dasarnya itu sahaja. Dengan sedikit enkapsulasi ZOD, routing API Next.js boleh diperolehi:

• Pengesahan Parameter Badan/Pertanyaan Permintaan Automatik
• Keselamatan Jenis Pautan Penuh
• Pengalaman pembangunan yang lebih baik (penyelesaian automatik, pelaporan ralat awal)
• Kurangkan kesilapan runtime

Tidak rumit, tetapi ia dapat meningkatkan kualiti projek.

Atas ialah kandungan terperinci Laluan API Jenis-selamat di Next.js dengan Zod. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!