서버 액션은 서버에서 실행되는 비동기 함수입니다. Next.js 애플리케이션에서 폼 제출 및 데이터 변경을 처리하기 위해 서버 및 클라이언트 컴포넌트에서 사용할 수 있습니다.

🎥 시청: 서버 액션을 사용한 폼 및 데이터 변경에 대해 더 알아보기 → YouTube (10분)

Convention

서버 액션은 React의 "use server" 지시어를 사용하여 정의할 수 있습니다. 함수의 맨 위에 지시어를 배치하여 함수를 서버 액션으로 표시하거나, 별도의 파일의 맨 위에 지시어를 배치하여 해당 파일의 모든 내보내기를 서버 액션으로 표시할 수 있습니다.

Server Components

서버 컴포넌트에서는 인라인 함수 레벨 또는 모듈 레벨의 "use server" 지시어를 사용할 수 있습니다. 서버 액션을 인라인으로 사용하려면 함수 본문 맨 위에 "use server"를 추가하세요:

// Server Component
export default function Page() {
  // Server Action
  async function create() {
    'use server'
 
    // ...
  }
 
  return (
    // ...
  )
}

[코드] app/page.tsx

Client Components

클라이언트 컴포넌트에서는 모듈 레벨의 "use server" 지시어를 사용하는 액션만 가져올 수 있습니다.

서버 액션을 클라이언트 컴포넌트에서 호출하려면 새 파일을 만들고 파일 맨 위에 "use server" 지시어를 추가하세요. 파일 내의 모든 함수는 클라이언트 및 서버 컴포넌트에서 재사용할 수 있는 서버 액션으로 표시됩니다:

'use server'
 
export async function create() {
  // ...
}

[코드] app/actions.ts

import { create } from '@/app/actions'
 
export function Button() {
  return (
    // ...
  )
}

[코드] app/ui/button.tsx