Getting Started with Formik to handle Form on Next App Router

This post will guide you to handle form with Formik and validate with Yup. If you like React Hook Form to handle form you can check this post.

Prerequisite:

1. Next App Router
2. Formik
3. Yup

Installation

Run this command on your terminal to install the dependencies

npm install formik yup

Step 1 — Create UI Form

Create new page on /app/formik/page.tsx and follow this code below

"use client"

export default function Page() {
  return (
    <main className="antialiased flex flex-col gap-2 mx-auto max-w-7xl mt-10">
      <div className="flex flex-col">
        <h1 className="text-xl font-semibold text-slate-200">Form</h1>

        <SignUpForm />
      </div>
    </main>
  )
}

function SignUpForm() {
  return (
    <form className="flex flex-col gap-4 mt-4 w-[500px]">
      <div className="flex gap-4">
        <div className="flex flex-col gap-1 flex-grow">
          <label className="text-sm text-slate-600">First Name</label>
          <input type="text"
            className={`rounded-md px-2 py-1 outline-none focus:ring focus:ring-blue-400/50 border border-blue-400 text-slate-800`}…