Next.js 14 - Server Action

Next.js 14

 

✅ Server Action이란?

---

Next.js App Router에서 도입된 기능

클라이언트 이벤트(폼 제출, 버튼 클릭 등)로 트리거되지만 실제 실행은 서버에서 처리되는 함수

 

기존에는 클라이언트 → API Route → 서버 로직 호출 → 응답 → 클라이언트 반영 순서를 거쳐야 했는데, Server Action 덕분에 API Route를 별도로 만들지 않고도 서버 로직을 직접 함수 형태로 작성할 수 있게 됨.

 

export default function LogIn() {
  const handleForm = async (formData: FormData) => {
    "use server";
    console.log(formData.get("email"), formData.get("password"));
    console.log("i run in the server baby!!!");
  };

 

이렇게 inline으로도 server action을 만들 수 있지만, 해당 inline server action이 "use client"가 포함 되어 있는 파일에 같이 존재할 수 없다. ("use client"가 적혀있으면 해당 파일에 "use server"가 또 존재할 수 없다.)

 

그래서 밑처럼 별도의 파일로 분리하여 import해서 사용하면 된다.

 

Example

---

 

app/login/actions.ts

"use server";

export const handleForm = async (prevState: any, formData: FormData) => {
  console.log(prevState);
  await new Promise((resolve) => setTimeout(resolve, 5000));
  return {
    errors: ["wrong password", "password too short"],
  };
};

 

app/login/page.tsx

"use client";

import FormButton from "@/components/form-btn";
import FormInput from "@/components/form-input";
import SocialLogin from "@/components/social-login";
import { useFormState } from "react-dom";
import { handleForm } from "./actions";

export default function LogIn() {
  const [state, action] = useFormState(handleForm, null);
  return (
    <div className="flex flex-col gap-10 px-6 py-8">
      <div className="flex flex-col gap-2 *:font-medium">
        <h1 className="text-2xl">안녕하세요!</h1>
        <h2 className="text-xl">Log in with email and password.</h2>
      </div>
      <form action={action} className="flex flex-col gap-3">
        <FormInput
          name="email"
          type="email"
          placeholder="Email"
          required
          errors={[]}
        />
        <FormInput
          name="password"
          type="password"
          placeholder="Password"
          required
          errors={state?.errors ?? []}
        />
        <FormButton text="Log in" />
      </form>
      <SocialLogin />
    </div>
  );
}

 

Next.js 12나 단순 React.js는 input의 name에 신경 쓰지 않았다.

onChange나 onSubmit을 사용하였기 때문

 

Server Action에서는 input 요소의 name이 굉장히 중요하다. (name 속성이 있어야 데이터를 받을 수 있기 때문)

const handleForm = async(formData: FormData) => {
	"use server";
    console.log(formData.get("email"), formData.get("password"));
};

 

(email과 password라는 name 속성을 가진 input의 데이터를 가져옴)