[javascript] Next.js에서의 폼 처리 방법은 어떤 것이 있나요?

24 Nov 2023

javascript

Next.js에서는 다양한 방법으로 폼 처리를 할 수 있습니다. 이 중에서 가장 흔한 패턴은 Next.js의 내장 폼 처리 기능을 사용하는 것입니다.

Next.js는 next/router 모듈을 통해 현재 페이지 URL과 폼 데이터를 쉽게 가져올 수 있게 해줍니다. 폼을 제출할 때마다 새로고침하지 않고도 페이지를 업데이트할 수 있습니다. 아래는 Next.js에서 폼 처리를 구현하는 코드의 예시입니다.

import { useRouter } from 'next/router';

export default function FormComponent() {
  const router = useRouter();

  const handleSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const formObject = Object.fromEntries(formData.entries());
    router.push({
      pathname: '/result',
      query: formObject,
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" name="name" />
      </label>
      <label>
        Email:
        <input type="email" name="email" />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

위 코드에서는 useRouter 훅을 사용하여 현재 페이지의 라우터 객체를 가져옵니다. handleSubmit 함수는 폼 제출 이벤트를 처리하고 폼 데이터를 query로 전달하여 /result 페이지로 이동합니다. 입력된 폼 데이터는 URL 쿼리 매개 변수로 전달됩니다.

Next.js는 이러한 방식으로 폼 처리를 간편하게 구현할 수 있도록 도와줍니다. 이를 사용하여 사용자의 입력을 캡처하고 처리하는 폼을 만들 수 있습니다.

더 많은 폼 처리 방법을 알고 싶다면 Next.js 공식 문서를 참조하세요: Next.js 폼 처리 가이드 ```