데브허브 | DEVHUB | This Next.js Middleware Pattern is AWESOME (Validated & Authenticated Actions)This Next.js Middleware Pattern is AWESOME (Validated & Authenticated Actions)
- Next.js 서버 액션에서 데이터 유효성 검사 및 사용자 인증 로직을 재사용 가능한 미들웨어 패턴으로 추상화하여 DRY(Don't Repeat Yourself) 원칙을 준수합니다. 🔄
validatedAction 미들웨어는 Zod와 같은 스키마 기반 유효성 검사를 통해 들어오는 데이터를 사전에 검증하여, 실제 서버 액션 로직은 이미 유효성이 검증된 데이터를 받도록 합니다. ✅
validatedActionWithUser 미들웨어는 validatedAction의 기능에 더해 사용자 인증 여부를 확인하여, 로그인된 사용자만 특정 액션을 실행할 수 있도록 보장합니다. 🧑💻
- 이 패턴은 서버 액션의 핵심 비즈니스 로직을 간결하게 유지하고, 유효성 검사 및 인증 관련 반복 코드를 제거하여 코드 가독성과 유지보수성을 향상시킵니다. ✨
action-helpers.ts와 같은 별도 파일에 미들웨어 로직을 분리하여 관리하며, ActionState 타입으로 액션 결과를 표준화하고, TypeScript 제네릭을 활용하여 강력한 타입 안정성을 제공합니다. 🛡️
- 프론트엔드에서는
useActionState 훅을 통해 미들웨어에서 반환된 표준화된 ActionState를 쉽게 처리하여 사용자에게 피드백(오류/성공 메시지)을 제공할 수 있습니다. 💬
- 인증 실패 시 오류 메시지를 반환하거나, 개발자 로그를 위해 명시적으로 에러를 throw하는 등 유연한 오류 처리 전략을 적용할 수 있습니다. 🚨