ZOD와 함께 다음.js에서 유형 안전 API 경로

ZOD는 Next.js에서 Type-Safe API 라우팅을 구현할 수 있습니다. 먼저, 요청 및 응답의 스키마를 정의한 다음 고차 기능을 통해 유형을 검증하고 주입 한 다음, 라우팅 에서이 캡슐화를 사용하여 입력 및 출력이 확인되도록합니다. 일관성을 보장하기 위해 프론트 엔드 유형을 생성하기 위해 스키마를 재사용 할 수도 있습니다. 1. 스키마 검증 요청 본문, 쿼리 매개 변수 및 응답 구조를 정의합니다. 2. withvalidation 함수를 작성하여 요청을 자동으로 구문 분석하고 입력하십시오. 3.이 기능을 API 라우팅에 적용하여 풀 링크 유형 안전을 달성하십시오. 4. 선택적으로 응답 본문을 확인하고 공구 기능을 캡슐화합니다. 5. 프론트 엔드는 ZOD에 의해 생성 된 유형을 직접 가져와 프론트 엔드 및 백엔드 유형이 일관되도록 개발 경험과 프로젝트 품질을 향상시킵니다.

Next.js는 풀 스택 애플리케이션을 간단하게 만들 수 있지만 기본적으로 API 라우팅은 약한 유형입니다. 요청 본문 구문 분석, 쿼리 매개 변수 또는 응답 형식에 쉽게 오류를 만들 수 있습니다. ZOD와 결합하여 컴파일 타임 체크 및 요청에서 응답으로 자동 프롬프트를 사용하여 완전히 유형-안전 API 라우팅을 구현할 수 있습니다.

다음은 Next.js에서 ZOD를 사용하여 유형-안전 API 라우팅을 구현하는 실용적인 방법입니다.

✅ 요청 및 응답을 정의하는 스키마

ZOD의 핵심은 검증 가능한 데이터 구조를 정의하는 것입니다. API 라우팅의 경우 일반적으로 다음을 확인해야합니다.

• 쿼리 매개 변수 ( query )
• 요청 본문 ( body )
• response

 // lib/schemas/userschema.ts
'zod'에서 {z} 가져 오기;

const createuserschema = z.object ({
  바디 : Z.Object ({
    이름 : z.string (). min (1),
    이메일 : z.string (). email (),
  }),
  쿼리 : Z.Object ({
    apikey : z.string (). min (1),
  }).선택 과목(),
});

내보내기 유형 CreateUserInput = z.infer <typeof createUserschema>;

이 스키마는 Post /api/users 가 요구하는 구조를 정의합니다.

? 닐 유형-안전 API 프로세서를 만듭니다

우리는 고차 기능, 자동으로 구문 분석 및 req.body 및 req.query 캡슐화합니다.

 // lib/api/handler.ts
'Next'에서 {nextapirequest, nexApiResponse} import;
'zod'에서 {zodschema, zoderror} import;

유형 핸들러 <T> = (
  req : nextapirequest & {body : t [ &#39;body&#39;]; 쿼리 : t [ &#39;query&#39;]},
  RES : NextApiresponse
) => 약속 <void> | 무효의;

변환 된 내보내기 기능 <t는 {body? : any; 쿼리? : any}> (
  스키마 : Zodschema <t>,
  핸들러 : 핸들러 <t>
) {
  return async (req : nextapirequest, res : nextapiresponse) => {
    노력하다 {
      const data = schema.parse ({
        Body : Req.method! == &#39;get&#39;? Req. Body : 정의되지 않은,
        쿼리 : req.Query,
      });

      리턴 핸들러 (req, res);
    } catch (오류) {
      if (zoderror의 오류 인스턴스) {
        return res.status (400) .json ({{
          오류 : &#39;검증 실패&#39;,
          세부 사항 : Error.errors,
        });
      }
      return res.status (500) .json ({error : &#39;내부 서버 오류&#39;});
    }
  };
}

이것은 withValidation 함수와 함께 다음과 같습니다.

• 입력을 확인하십시오
• 유형 수준에서 "올바른 body 및 query 유형"주입 "
• ZOD 오류를 잡고 400을 반환하십시오

? 실제 사용 : 타입 안전 API 라우팅

 // pages/api/users.ts
'Next'에서 {nextapirequest, nexApiResponse} import;
'@/lib/api/handler'에서 {withvalidation} 가져 오기;
'@/lib/schemas/userschema'에서 {createUserschema} import;

변환 된 기본값 (
  CreateUserschema,
  비동기 기능 createuser (
    req : nextapirequest & {body : {name : string; 이메일 : String}},
    RES : NextApiresponse
  ) {
    const {name, email} = req.body;

    // 여기 유형 안전 : 이름과 이메일은 Zod에 의해 문자열임을 보장했습니다.
    // 데이터베이스에 안전하게 삽입 할 수 있습니다 ...

    return res.status (201) .json ({{
      ID : '123',
      이름,
      이메일,
    });
  }
);

지금:

• 프론트 엔드가 name: null 통과하면 ZOD에 의해 거부됩니다.
• vs 코드, req.body. 완전히 자동 완료됩니다
• req.body.phone 에 대한 액세스는 오류를보고합니다 (스키마가 정의되지 않는 한)

? 선택 사항 : 통합 응답 형식 응답 검증

더 나아가서, 예기치 않은 민감한 필드의 반환을 방지하기 위해 출력을 확인할 수도 있습니다.

 Const CreaterEpresseschema = z.Object ({
  id : z.string (),
  이름 : z.string (),
  이메일 : z.string (),
});

// const result = {id : '123', 이름, 이메일};
const parsed = createresponseschema.parse (결과); // 출력 구조가 올바른 return res.status (201) .json (Parsed)인지 확인하십시오.

validResponse(schema, data) 도구 기능을 캡슐화 할 수도 있습니다.

? 팁 : 프론트 엔드 유형 재사용

ZOD 스키마는 TypeScript 유형을 생성 할 수 있으므로 프론트 엔드가 직접 가져올 수 있습니다.

 // frontend 구성 요소
'@/lib/schemas/userschema'에서 가져 오기 유형 {createUserInput};

const 데이터 : createuserinput [ 'body'] = {
  이름 : 'Alice',
  이메일 : 'alice@example.com',
}; // 유형은 정확히 동일하며 백엔드 변경 필드에 대해 걱정할 필요가 없습니다.

기본적으로 그게 다야. 소량의 ZOD 캡슐화를 사용하면 다음에 JS API 라우팅을 얻을 수 있습니다.

• 요청 본문/쿼리 매개 변수의 자동 검증
• 전체 링크 유형 안전
• 더 나은 개발 경험 (자동 완료, 조기 오류보고)
• 런타임 오류를 줄입니다

복잡하지는 않지만 프로젝트의 품질을 크게 향상시킬 수 있습니다.

위 내용은 ZOD와 함께 다음.js에서 유형 안전 API 경로의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!