[Next.js] [Next.js] 인프런 강의 "Next.js 필수 개발 가이드 3시간 완성!" 정리(Zod를 이용한 유효성 검사)

1. Zod 설치

Zod는 유효성 검사 라이브러리이다.

npm i zod

😉 공식 문서 : https://zod.dev/

 

2. 적용 방법

📌 스키마 작성

// src/app/api/users/schema.ts

import { z } from "zod";

const schema = z.object({
  name: z.string().min(3),
  email: z.string().email(),
  age: z.number(),
});

export default schema;

 

📌 Zod 적용

// src/app/api/users/[id]/route.tsx

import { NextRequest, NextResponse } from "next/server";
import schema from "../schema";

// (생략)

export async function PUT(
  request: NextRequest,
  { params }: { params: { id: number } }
) {
  const body = await request.json();

  /*
  zod schema 적용
  parse method : 오류 발생시 오류 메시지, throw 함수 호출 후 서버 중단
  safeParse method : 서버 중단되지 않음, 유효성 검증 결과 확인 가능
  */
  const validation = schema.safeParse(body);
  if (!validation.success) {
    return NextResponse.json(validation.error.errors, { status: 404 });
  }

  //   zod 사용 안했을 때 코드
  //   if (!body.name) {
  //     return NextResponse.json({ error: "Name is required" }, { status: 404 });
  //   }

  if (params.id > 10) {
    return NextResponse.json({ error: "User Not Found" }, { status: 404 });
  }

  return NextResponse.json({ id: 1, name: body.name });
}

/*
윈도우 curl을 이용한 요청 테스트
name 속성에 빈값을 넣고 PUT 요청하였다.
요청 명령 : curl -d "{""name"":""""}" -H "Content-Type: application/json" -X PUT http://localhost:3000/api/users/1
요청 결과 : [{"code":"too_small","minimum":3,"type":"string","inclusive":true,"exact":false,"message":"String must contain at least 3 character(s)","path":["name"]},{"code":"invalid_type","expected":"string","received":"undefined","path":["email"],"message":"Required"},{"code":"invalid_type","expected":"number","received":"undefined","path":["age"],"message":"Required"}]
*/