[NextJS] Server Actions

[NextJS] Server Actions

Next.js 13.4 버전 이상에서만 사용가능합니다.

반응형

// /login/page.jsx

export default function LogIn() {
  async function handleSubmit(formData){
    'use server';
    console.log(formData) // 유저가 입력한 값 전체
    console.log(formData.get('email')) // 유저가 입력한 email 값
    console.log(formData.get('password')) // 유저가 입력한 password 값
  }

// 이렇게 작성해도 된다.
//  const handleSubmit = async(formData) => {
//    'use server';
//    console.log(formData) 
//    console.log(formData.get('email'))  
//    console.log(formData.get('password'))
//  }

  return (
    <form action={handleSubmit}>
      <input type='email' name='email'/>
      <input type='password' name='password'/>
      <button type='submit'>Log in</button>
    </form>
  )
}

 

form의 action에 폼 전송 시 실행될 함수를 입력합니다.

form 내부의 input에 name을 입력해야 합니다.

name을 설정하지 않으면, action에 필요한 data가 formData에 포함되지 않습니다.

 

 

use client 페이지 내부에서 use server를 사용하면 에러가 발생합니다.

그렇기에 분리하여 작성하는 편이 좋습니다.

 

// /login/page.jsx

"use client";

import { handleSubmit } from "./actions";

export default function LogIn() {
  return (
    <form action={handleSubmit}>
      <input type='email' name='email'/>
      <input type='password' name='password'/>
      <button type='submit'>Log in</button>
    </form>
  )
}

// /login/actions.js

"use server"

export async function handleSubmit(formData){
  console.log(formData)
  console.log(formData.get('email'))
  console.log(formData.get('password'))
}