Next.js Server Actions 완벽 가이드 — 폼 처리와 데이터 변경을 서버에서 처리하는 방법

Next.js Server Actions 폼 전송 기술로 백엔드 API 배관 코드 제거하기

Server Actions는 리액트 컴포넌트 단에서 바로 호출할 수 있는 서버 전용 비동기 함수입니다. 파일 상단에 'use server' 지시어를 할당하면, 빌드 컴파일러는 이 함수를 클라이언트 번들에서 격리하고 내부적으로 고유 해시 ID를 가진 POST API 통신 파이프라인으로 리매핑해 줍니다. 따라서 브라우저 자바스크립트가 로딩되지 않은 극단적인 환경(JS Disable)에서도 HTML 네이티브 form 전송 메커니즘을 타고 작동하므로 접근성 면에서 엄청난 장점을 보이며, 백엔드 CRUD 로직 수립 비용을 혁신적으로 깎아 줍니다.

// app/actions/post.ts
'use server';
import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';
import { prisma } from '@/lib/prisma';

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('/blog');
  redirect('/blog');
}

Next.js Server Actions 데이터 Zod 유효성 검사와 useActionState 상태 추적 노하우

아무리 API 작성이 편해졌다 해도, 서버 단에서 넘어온 날것의 파라미터 유효성 검사를 빼먹으면 SQL 인젝션이나 더러운 데이터 유입으로 이어집니다. 이때는 Zod 라이브러리를 기용하여 들어온 FormData를 객체로 파싱하고 스키마 검증 에러를 잡아내는 방어가 필수입니다. 또한 컴포넌트 단에서 전송 중인 로딩 스피너를 켜고 에러 메시지를 이쁘게 받아 그리하려면 React 19의 useActionState(구 useFormState)와 useFormStatus 훅을 엮어야 합니다. 폼이 도는 중에는 자동으로 pending 플래그가 참으로 변조되어 유저의 찰나 중복 클릭을 차단하게 설계해 두어야 실무 배포 환경에서 안심할 수 있습니다.

Next.js Server Actions 전송 보안과 사용자 인가 권한 검사 기법

Server Actions는 겉보기에 일반 리액트 함수처럼 생겨서 보안을 간과하기 십상이지만, 실상 백엔드 POST API와 다를 바 없습니다. 즉, 공격자가 컬(curl)이나 포스트맨으로 내 액션 식별 ID 주소에 다이렉트 변조 패킷을 쏠 수 있다는 뜻입니다. 액션 함수 실행부 최상단에서 세션 쿠키 정보를 매치 조회해 유저 자격을 2차 검증(Authorization)하고, 대상 레코드의 실제 소유주가 요청자 본인이 맞는지 엄격한 소유권 인가 검사를 두르지 않으면 다른 사람의 글이 맘대로 지워지는 보안 참사로 이어질 수 있습니다. 다행히 CSRF 방어는 넥스트 프레임워크가 액션 전송 시 헤더의 Host와 Origin 일치 여부를 대조해 원천 차단해 줍니다.