Request/Response form handling with Next.js

formData.js

import formidable from "formidable";

export default function formData(request) {
  const form = formidable({ multiples: true });

  return new Promise((resolve, reject) => {
    form.parse(request, (err, fields, files) => {
      if (err) {
        reject(err);
        return;
      }
      resolve({ data: fields, files });
      return;
    });
  });
}

index.js

import formData from "../formData";

export async function getServerSideProps({ req }) {
  const { data } =
    req.method === "POST" ? await formData(req) : { data: {}, errors: {} };

  return {
    props: {
      form: {
        data,
      },
    },
  };
}

export default function Home({ form }) {
  return (
    <main style={{ margin: "40px auto", maxWidth: "500px" }}>
      <h1>Next.js form</h1>

      {form.data.name ? <>Hello {form.data.name}</> : null}

      <form action="." method="post">
        <label>
          What&apos;s your name:
          <input name="name" required autoComplete="off" />
        </label>
        <button>Submit</button>
      </form>
    </main>
  );
}