Next.js Server Actions 완벽 가이드

Server Actions는 Next.js 14부터 안정화된 기능으로, 서버에서 직접 실행되는 함수를 클라이언트에서 호출할 수 있게 해줍니다.

기본 사용법

Server Action은 "use server" 지시문으로 정의합니다:

"use server"

export async function createPost(formData: FormData) {
  const title = formData.get("title")
  const content = formData.get("content")
  
  await db.post.create({
    data: { title, content }
  })
  
  revalidatePath("/posts")
}

폼에서 사용하기

export default function PostForm() {
  return (
    <form action={createPost}>
      <input name="title" />
      <textarea name="content" />
      <button type="submit">작성</button>
    </form>
  )
}

장점

• API Route 없이 서버 로직 실행
• Progressive Enhancement 지원
• 타입 안전성 보장

Server Actions를 잘 활용하면 더 간결하고 유지보수하기 쉬운 코드를 작성할 수 있습니다.