// app/todos/page.tsx — 액션을 폼에 바로 연결
import { createTodo } from "./actions";
export default function Page() {
return (
<form action={createTodo}> {/* onSubmit 없음, fetch 없음, /api 라우트 없음 */}
<input name="title" />
<button>Add</button>
</form>
);
}
폼의 action이 Server Action을 가리킵니다. 제출 시 Next.js가 FormData를 서버로 보내 거기서 함수를 실행하고, 영향받은 페이지를 재검증할 수 있습니다. API 라우트도, 클라이언트 측 fetch 코드도 없이 모두 처리됩니다.
"use client";
import { createTodo } from "./actions";
export function AddButton() {
return <button onClick={() => createTodo(/* ... */)}>Add</button>;
}
route.ts 핸들러와 클라이언트 fetch를 작성하지 않고도 변경.revalidatePath/revalidateTag가 변경 후 캐싱된 데이터를 새로고침.⚠️ Server Action은 내부적으로 공개 엔드포인트입니다 — 실제 API 라우트처럼 항상 입력을
검증하고 그 안에서 권한을 확인하세요.
Server Action은 통상적인 변경 스택(API 라우트 + 클라이언트 fetch + 상태 처리)을 직접 호출하는 단일 서버 함수로 축약합니다. 폼과 데이터 변경에 대한 App Router의 답입니다.
보일러플레이트를 줄이고, 점진적 향상을 가능하게 하며, 캐싱/재검증과 통합되지만, (어떤 엔드포인트와도 마찬가지로) 그 안에서 검증과 인증 확인이 필요합니다.