Handle Form on NextJs 14 using Server Action and Drizzle ORM

NextJs 14 already use Server Action stable version and this post will guide you to handle form using server action

One of the features NextJs 14 offered is server action which has received a stable version. This post will cover how to handle validation form, store and get data from database and get state form.

Prerequisite:

1. Next 14
2. Zod
3. Drizzle ORM
4. Drizzle Kit
5. Postgres
6. Supabase

To install this prerequisite run this command

// Next 14
npx create-next-app@latest

// Zod
npm install zod

// Drizzle ORM, Kit and Postgres
npm install drizzle-orm postgres
npm install -D drizzle-kit 

After install the prerequisite we can start to build UI for the app

Step 1: Building UI

In this step we will guide you to create component like input, button and table