230901 nextjs 서버컴포넌트에서 form 사용하기

230901 nextjs 서버컴포넌트에서 form 사용하기

서버 컴포넌트에서는 useState와 같은 hooks을 사용할 수 없다.따라서 form의 기본 사용법에 따라 action과 method로 http 요청을 보내고 api 폴더에 만들어 둔 route.ts에서 적절한 처리하여 응답을 받는다.

// app/api/auth/login/route.ts

export async function POST(request: Request) {
	const requestUrl = new URL(request.url)
    const formData = await request.formData()
    const email = String(formData.get('email'))
    const password = String(formData.get('password'))
    
    //로그인 처리
    
    //에러 발생시 리디렉션
    if(error) return NextResponse.redirect(
      `${requestUrl.origin}/login?error=계정을 찾을 수 없습니다`,
      { status: 301 }
    )
    
    // 성공 시 홈으로 리디렉션
    return NextResponse.redirect(requestUrl.origin, {
      status: 301,
    })
}

 

app/login/page.tsx
...
<form action='/api/auth/login' method='post'>
    <label htmlFor="email">Email</label>
    <input name="email" required />
    <label htmlFor="password">Password</label>
    <input type="password" name="password" required />
</form>
...