프론트엔드 소식Next.js

메타프레임워크가 기본값이 됐다 - Next.js와 Server Actions의 표준화

2026.06.17 08:07·조회 30

한 줄 요약 - 이제 React를 그냥 쓰기보다 Next.js 같은 메타프레임워크로 시작하는 게 표준이 됐고, 백엔드 로직까지 Server Actions로 프론트 저장소 안에서 다룹니다.

무슨 일이에요?

Server Actions는 서버에서 도는 함수를 폼 action에 직접 연결하는 방식입니다. 별도 API 라우트를 만들 필요 없이 폼 제출이 곧 서버 함수 호출이 됩니다.

핵심 코드

// app/actions.ts
'use server';
export async function createTodo(formData) {
  const title = String(formData.get('title') ?? '');
  await db.todo.create({ data: { title } });
}
<!-- 폼에서 바로 호출 (fetch/엔드포인트 불필요) -->
<form action={createTodo}>
  <input name="title" />
  <button>추가</button>
</form>

왜 중요해요?

  • API 보일러플레이트가 줄고, 폼이 JS 없이도 동작하는 점진적 향상이 됩니다.
  • 주의: 'use server' 함수는 신뢰 경계입니다. 입력 검증과 권한 체크를 반드시 직접 해야 합니다.

댓글