# Next.js 서버 액션 알아보기
> Next의 기가 막힌 서버 액션에 대해 알아봅니다.
- Published: 2023-09-26
- Source: https://yujiseok.blog/ko/posts/nextjs-server-actions
## 개요
서버 액션이 무엇인지 예제와 함께 정리합니다.
## 서버 액션
서버 액션은 폼의 뮤테이션(생성, 업데이트, 삭제)을 할 수 있게 해주는 넥스트의 아주 강력한 기능입니다.
서버 액션을 사용하면, API 엔드포인트를 생성하지 않고도 컴포넌트 내에서 비동기 함수를 직접 정의할 수 있습니다.
서버 액션을 사용하려면 `next.config.js` 파일 내부에 다음과 같이 설정을 추가해야 합니다:
```js title="next.config.js"
module.exports = {
experimental: {
serverActions: true,
},
};
```
## 서버 액션을 사용해 폼 다루기
아주 간단한 투두 앱을 만들며, 서버 액션을 이해해 봅니다.
### 프로젝트 설정
우선 디렉토리에 넥스트 앱을 생성합니다.
```bash
npx create-next-app@latest
```
간단한 앱을 만들기 위해서 `prisma`와 `sqlite`를 사용합니다.
```bash
npm install prisma --save-dev
npx prisma init --datasource-provider sqlite
```
설치가 끝나면, 투두를 위한 prisma 스키마를 정의해 줍니다.
```prisma title="prisma/schema.prisma"
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "sqlite"
url = env("DATABASE_URL")
}
// 투두 스키마
model Todos {
id Int @id @default(autoincrement())
title String
createTododAt DateTime @default(now())
}
```
스키마를 정의했으니 실제 데이터베이스 테이블에 스키마를 다음과 같은 명령어로 추가해 줍니다.
```bash
npx prisma db push
```
이제 앱에서 사용할 prisma의 인스턴스를 생성해 줍니다.
```ts title="lib/prisma.ts"
import { PrismaClient } from "@prisma/client";
declare global {
var prisma: PrismaClient | undefined;
}
const client = globalThis.prisma || new PrismaClient();
if (process.env.NODE_ENV !== "production") globalThis.prisma = client;
export default client;
```
인스턴스가 존재한다면, 기존의 인스턴스를 사용하고 없을 시 새로 만들어줍니다.
### UI 및 서버 액션 정의하기
이제 본격적으로 코드를 작성하며 서버 액션을 살펴봅니다.
우선 `app/page.tsx`의 보일러 플레이트 코드들을 제거한 후 폼을 위한 UI을 추가합니다.
```tsx title="page.tsx" {8}
import { createTodo } from "@/action";
const page = () => {
return (
);
};
export default page;
```
위의 코드에서 중요한 부분은 바로 폼 태그의 `action`입니다.
서버 액션은 기존 리액트에서 클릭 이벤트 또는 서브밋 이벤트로 폼을 제출하는 방식이 아닌, 폼의 action을 사용해 서버로 폼의 데이터를 제출합니다.
이때 `