Next.js 14 Server Actions 사용법

Question

Next.js 14에서 Server Actions가 정식 출시됐는데 어떻게 사용하나요?

김영삼 · Accepted Answer

Server Actions는 서버 함수를 클라이언트에서 직접 호출하는 기능입니다. API Routes 없이 폼 처리가 가능합니다.

// app/actions.ts
"use server"

import { prisma } from "@/lib/prisma"
import { revalidatePath } from "next/cache"

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

// app/posts/new/page.tsx
import { createPost } from "../actions"

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

JavaScript 없이도 동작하고(Progressive Enhancement), API Routes를 만들 필요가 없어서 코드가 훨씬 간결해집니다.

댓글 1