How to Build a Contact Form in Next.js (Without Building a Backend)

Context

Next.js 프로젝트에 연락처 폼을 추가할 때마다 이메일 공급자 선택, API 키 관리, 스팸 처리, 제출 데이터 저장 등 복수의 인프라 결정이 필요했다. 특히 랜딩페이지나 SaaS 초기 단계에서는 핵심 기능 개발 전에 이러한 설정에 소비되는 시간이 높은 기회비용이었다.

Technical Solution

• HTML 기본 폼에서 React 상호형 폼으로 진화: <form> 태그의 action 속성으로 호스팅 엔드포인트 지정, FormData API와 fetch()로 비동기 제출 처리
• FormData 기반 제출: JSON 직렬화 대신 FormData 객체 사용으로 모든 입력 필드 및 파일 자동 캡처
• 상태 관리 패턴: "idle" → "loading" → "success"/"error" 상태 전환으로 중복 제출 방지 및 사용자 피드백 제공
• X-Requested-With 헤더 추가: 폼 백엔드가 JSON 응답 반환하도록 신호 전달, HTML 리다이렉트 대신 브라우저 페이지 유지
• 클라이언트 검증 레이어: FormData 객체에서 필드값 추출 후 정규식(이메일 형식)으로 사전 검증, 오류 메시지 렌더링
• react-hook-form 통합: 복잡한 폼에서 register 훅으로 폼 상태 중앙집중식 관리, 제출 시 FormData로 변환 후 동일한 fetch 로직 적용
• 허니팟 필드: 숨겨진 입력 필드(_honeypot)를 추가해 자동 봇은 채우지만 사용자는 무시, 스팸 필터링

Key Takeaway

호스팅 폼 백엔드 서비스를 사용하면 이메일 API 선택, 스팸 감지 로직, 데이터 저장소 구축 없이도 프로덕션급 연락처 폼을 구현할 수 있으며, 핵심 제품 개발에 집중할 수 있다.