Minimal sample of a blitzjs/nextjs server rendered form submission

Feedback.tsx

import { urlencoded } from "body-parser"
import * as z from "zod"

const feedbackForm = z.object({
  email: z.string().email(),
  message: z.string(),
})

interface Props {
  flash?: string
}

export default function Feedback({ flash }: Props) {
  return (
    <>
      <h1>{flash || "Feedback"}</h1>

      <form method="POST">
        <div>
          <label>
            From
            <input name="email" type="email" />
          </label>
        </div>

        <div>
          <label>
            Message
            <textarea name="message" />
          </label>
        </div>

        <button>Upload</button>
      </form>
    </>
  )
}

const bodyParser = urlencoded()
export async function getServerSideProps({ req, res }) {
  if (req.method !== "POST") return { props: {} }

  await new Promise((resolve) => bodyParser(req, res, resolve))
  const form = feedbackForm.parse(req.body)

  console.log(`
  User [${form.email}] had this feedback about our website:

  ${form.message}`)

  return { props: { flash: "Thank you for your submission!" } }
}