I have this nextjs + drizzle app where i create users and then display them. Like so import { sql } from '@vercel/postgres' import { db } from '@/lib/drizzle' import { UsersTable, User, NewUser } from './drizzle'

const newUsers: NewUser[] = [ { name: 'Guillermo Rauch', email: 'rauchg@vercel.com', image: 'https://pbs.twimg.com/profile_images/1576257734810312704/ucxb4lHy_400x400.jpg', }, { name: 'Lee Robinson', email: 'lee@vercel.com', image: 'https://pbs.twimg.com/profile_images/1587647097670467584/adWRdqQ6_400x400.jpg', }, { name: 'Steven Tey', email: 'stey@vercel.com', image: 'https://pbs.twimg.com/profile_images/1506792347840888834/dS-r50Je_400x400.jpg', }, ]

export async function seed() { // Create table with raw SQL const createTable = await sql.query( CREATE TABLE IF NOT EXISTS users ( id SERIAL PRIMARY KEY, name VARCHAR(255) NOT NULL, email VARCHAR(255) UNIQUE NOT NULL, image VARCHAR(255), "createdAt" TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP ); ) console.log(Created "users" table)

const insertedUsers: User[] = await db .insert(UsersTable) .values(newUsers) .returning() console.log(Seeded ${insertedUsers.length} users)

return { createTable, insertedUsers, } } import { pgTable, serial, text, timestamp, uniqueIndex, } from 'drizzle-orm/pg-core' import { InferModel } from 'drizzle-orm' import { sql } from '@vercel/postgres' import { drizzle } from 'drizzle-orm/vercel-postgres'

export const UsersTable = pgTable( 'users', { id: serial('id').primaryKey(), name: text('name').notNull(), email: text('email').notNull(), image: text('imagdrizzle-orm/pg-ce').notNull(), createdAt: timestamp('createdAt').defaultNow().notNull(), }, (users) => { return { uniqueIdx: uniqueIndex('unique_idx').on(users.email), } } )

export type User = InferModel<typeof UsersTable> export type NewUser = InferModel<typeof UsersTable, 'insert'>

// Connect to Vercel Postgres export const db = drizzle(sql) import Image from 'next/image' import Link from 'next/link' import { Suspense } from 'react' import Table from '@/components/table' import TablePlaceholder from '@/components/table-placeholder' import ExpandingArrow from '@/components/expanding-arrow'

export const preferredRegion = 'home' export const dynamic = 'force-dynamic'

export default function Home() { return ( <main className="relative flex min-h-screen flex-col items-center justify-center"> <Link href="https://vercel.com/templates/next.js/postgres-drizzle" className="group mt-20 sm:mt-0 rounded-full flex space-x-1 bg-white/30 shadow-sm ring-1 ring-gray-900/5 text-gray-600 text-sm font-medium px-10 py-2 hover:shadow-lg active:shadow-sm transition-all" > <p>Deploy your own to Vercel</p> <ExpandingArrow /> </Link> <h1 className="pt-4 pb-8 bg-gradient-to-br from-black via-[#171717] to-[#4b4b4b] bg-clip-text text-center text-4xl font-medium tracking-tight text-transparent md:text-7xl"> Postgres on Vercel </h1> <Suspense fallback={<TablePlaceholder />}> {/* @ts-expect-error Async Server Component */} <Table /> </Suspense> <p className="font-light text-gray-600 w-full max-w-lg text-center mt-6"> <Link href="https://vercel.com/postgres" className="font-medium underline underline-offset-4 hover:text-black transition-colors" > Vercel Postgres </Link>{' '} demo with{' '} <Link href="https://github.com/drizzle-team/drizzle-orm" className="font-medium underline underline-offset-4 hover:text-black transition-colors" > Drizzle </Link>{' '} as the ORM. <br /> Built with{' '} <Link href="https://nextjs.org/docs" className="font-medium underline underline-offset-4 hover:text-black transition-colors" > Next.js App Router </Link> . </p>

  <div className="flex justify-center space-x-5 pt-10 mt-10 border-t border-gray-300 w-full max-w-xl text-gray-600">
    <Link
      href="https://postgres-prisma.vercel.app/"
      className="font-medium underline underline-offset-4 hover:text-black transition-colors"
    >
      Prisma
    </Link>
    <Link
      href="https://postgres-starter.vercel.app/"
      className="font-medium underline underline-offset-4 hover:text-black transition-colors"
    >
      Starter
    </Link>
    <Link
      href="https://postgres-kysely.vercel.app/"
      className="font-medium underline underline-offset-4 hover:text-black transition-colors"
    >
      Kysely
    </Link>
  </div>
  <div className="sm:absolute sm:bottom-0 w-full px-20 py-10 flex justify-between">
    <Link href="https://vercel.com">
      <Image
        src="/vercel.svg"
        alt="Vercel Logo"
        width={100}
        height={24}
        priority
      />
    </Link>
    <Link
      href="https://github.com/vercel/examples/tree/main/storage/postgres-drizzle"
      className="flex items-center space-x-2"
    >
      <Image
        src="/github.svg"
        alt="GitHub Logo"
        width={24}
        height={24}
        priority
      />
      <p className="font-light">Source</p>
    </Link>
  </div>
</main>
) }

Now I want a input field on the frontend which allows me to add new users. How do I do that?