Table of Contents

• Server Actions
  • Description
  • Learn More
  • Links

Server actions with Next.js.

A simple example of server actions with Next.js, Supabase, AuthJS, TailwindCSS, ShadCn UI, Zod, and react-hot-toast.

• Learn how to use server actions to mutate data in Next.js.
• Learn how to use Supabase for database and storage.
• Learn how to use AuthJS for authentication.
• Learn how to use TailwindCSS for styling.
• Learn how to use ShadCn UI for UI components.
• Learn how to use Zod for form validation.
• Learn how to use react-hot-toast for toasts.
• Learn how to use server actions for file upload.

Getting Started

First, run the development server:

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 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 - learn about Next.js features and API.
• React - Learn Server Actions in forms.
• React-dom useFormState hooks - Learn how to use useFormState hook.
• React-dom useFormStatus hooks - Learn how to use useFormStatus hook.

Extra resources:

• Supabase Documentation - learn about Supabase features and API.
• AuthJS Documentation - learn about AuthJS features and API.
• ShadCn UI Documentation - learn about ShadCn UI features and API.

Deploy on Vercel

Author

• patelvivek.dev

Links

• Live Demo
• Blog Post

Made with ❤️ by Vivek Patel