https://github.com/komzweb/nextjs-server-actions-form
Form example using Next.js (Server Actions), Vercel Postgres, and shadcn/ui
https://github.com/komzweb/nextjs-server-actions-form
bun nextjs react server-actions shadcn-ui tailwindcss typescript vercel-postgres
Last synced: about 1 month ago
JSON representation
Form example using Next.js (Server Actions), Vercel Postgres, and shadcn/ui
- Host: GitHub
- URL: https://github.com/komzweb/nextjs-server-actions-form
- Owner: komzweb
- Created: 2023-09-28T02:26:22.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-09-28T09:31:49.000Z (over 1 year ago)
- Last Synced: 2025-03-29T09:41:31.448Z (about 2 months ago)
- Topics: bun, nextjs, react, server-actions, shadcn-ui, tailwindcss, typescript, vercel-postgres
- Language: TypeScript
- Homepage:
- Size: 88.9 KB
- Stars: 10
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next.js Server Actions Form
This example is based on [Forms with Next.js and Server Actions](https://github.com/vercel/next.js/tree/canary/examples/next-forms) published by [Next.js](https://nextjs.org/), with the following additions:
- Using [shadcn/ui](https://ui.shadcn.com/)
- Some components
- Dark mode
- Using [Tailwind CSS](https://tailwindcss.com/)
- Implementing form reset
## Run locally
First, create `.env.local` in the root and set your [Vercel Postgres](https://vercel.com/storage/postgres) secrets to it:
```
POSTGRES_URL="************"
POSTGRES_PRISMA_URL="************"
POSTGRES_URL_NON_POOLING="************"
POSTGRES_USER="************"
POSTGRES_HOST="************"
POSTGRES_PASSWORD="************"
POSTGRES_DATABASE="************"
```
Then, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.