[Next.js] Server Actions

Server Actions

• Next14에 정식적으로 도입
  • input 같은거 value, onChange 다 지워도 됨! 대신, 유효성 검사를 위해 각 input에다가 required 붙여주고 name 속성 다 붙여주기
  • input들을 태그로 감싸고 action={submit}넣어주기
• Server Component에서 Server Action 사용하기

<form action={submit}>
<input id="id" name="id" ... />
...
</form>

// server action 함수 
// 매개 변수로 formData를 그대로 받음
const submit = async(formData: FormData) => {

"use server" // 서버 코드를 작성하기 위해서 반드시 명시해줘야 함, 

//브라우저에 노출이 안되기 때문에, 키값이나 비밀값 써도 문제 없음
//브라우저 -> 서버 -> DB가 아닌 서버 -> DB 로 바로간다 생각하면 됨

//formData.get('이름') 으로 값들을 가져 올 수 있음. name이랑 일치해야함!
if(!formData.get('id')){
	return { message : 'no_id'};
}
if(!formData.get('name')){
	return { message : 'no_name'};
}
if(!formData.get('password')){
	return { message : 'no_password'};
}
if(!formData.get('image')){
	return { message : 'no_image'};
}

//NEXT_PUBLIC_BASE_URL = http://localhost:9090 (node 서버 주소)
const response = await fetch(`${NEXT_PUBLIC_BASE_URL}/api/users`, {
	method: 'post',
	body : formData,
	credentials: 'include',
})
console.log(response.status);
if(response.status === 403)
{
	return {message: 'user_exists'}
}
console.log(await response.json())
redirect('home')
}