Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/patelvivekdev/server-actions
Learn how to use server actions in Nextjs
https://github.com/patelvivekdev/server-actions
file-upload next-auth nextjs14 server-actions supabase supabase-storage
Last synced: 4 days ago
JSON representation
Learn how to use server actions in Nextjs
- Host: GitHub
- URL: https://github.com/patelvivekdev/server-actions
- Owner: patelvivekdev
- Created: 2024-04-13T22:58:38.000Z (10 months ago)
- Default Branch: master
- Last Pushed: 2024-12-18T07:00:35.000Z (about 2 months ago)
- Last Synced: 2024-12-18T07:53:50.089Z (about 2 months ago)
- Topics: file-upload, next-auth, nextjs14, server-actions, supabase, supabase-storage
- Language: TypeScript
- Homepage: https://server-actions-patelvivekdev.vercel.app/
- Size: 788 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Table of Contents
- [Server actions with Next.js.](#server-actions-with-nextjs)
- [A simple example of server actions with Next.js, Turso, AuthJS, TailwindCSS, ShadCn UI, Zod.](#a-simple-example-of-server-actions-with-nextjs-turso-authjs-tailwindcss-shadcn-ui-zod)
- [Getting Started](#getting-started)
- [Learn More](#learn-more)
- [Deploy on Vercel](#deploy-on-vercel)
- [Author](#author)
- [Links](#links)
# Server actions with Next.js.
### A simple example of server actions with Next.js, Turso, AuthJS, TailwindCSS, ShadCn UI, Zod.
- [x] server actions to mutate data in Next.js.
- [x] Turso for database.
- [x] AuthJS for authentication.
- [x] TailwindCSS for styling.
- [x] ShadCn UI for UI components.
- [x] Zod for form validation.
- [x] server actions for file upload.
## Getting Started
First, run the development server:
```bash
npm install
npm run dev
# or
bun install
bun dev
```
Copy the `.env.example` to `.env.local` and fill in the required values.
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## Learn More
To learn more about Server Actions, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations) - learn about Next.js features and API.
- [React](https://react.dev/reference/react/use-server#server-actions-in-forms) - Learn Server Actions in forms.
- [useActionState hooks](https://react.dev/reference/react/useActionState) - Learn how to use useActionState hook.
- [useFormStatus hooks](https://react.dev/reference/react-dom/hooks/useFormStatus) - Learn how to use useFormStatus hook.
- [useOptimistic hooks](https://react.dev/reference/react/useOptimistic) - Learn how to use useOptimistic hook.
Extra resources:
- [Turso](https://turso.tech) - learn about Turso features and API.
- [Drizzle](https://orm.drizzle.team/) - learn about Drizzle features and API.
- [AuthJS Documentation](https://authjs.dev/getting-started) - learn about AuthJS features and API.
- [ShadCn UI Documentation](https://ui.shadcn.com/) - learn about ShadCn UI features and API.
## Deploy on Vercel
## Author
- [patelvivek.dev](https://patelvivek.dev)
## Links
- [Live Demo](https://server-actions-patelvivekdev.vercel.app/)
- [Blog Post](https://patelvivek.dev/blog/server-actions)
Made with ❤️ by Vivek Patel