form action으로 서버 변경 명령과 입력 검증 경계를 만듭니다.
Server Action은 use server 지시어가 있는 비동기 함수이며 form의 action으로 전달할 수 있습니다. FormData를 읽고 서버에서 인증·인가·검증한 뒤 변경합니다.
클라이언트 검증은 UX이고 보안 경계는 서버 검증입니다.
성공 뒤 revalidatePath 또는 redirect를 사용할 때 갱신 범위와 중복 제출을 설계합니다.
숨겨진 input 값과 사용자 id를 신뢰해 권한 검사를 생략하지 마세요.
로컬 프로젝트에서 확인해보세요title이 3자 미만이면 구체적인 오류를 반환하도록 바꾸세요.
export default function Page() {
async function createCourse(formData) {
"use server";
const title = String(formData.get("title") ?? "").trim();
if (title.length < 2) throw new Error("제목은 두 글자 이상이어야 합니다.");
console.log("등록", title);
}
return (
<main>
<h1>강좌 등록</h1>
<form action={createCourse}>
<label>
제목 <input name="title" required />
</label>
<button>등록</button>
</form>
</main>
);
}