This tutorial will teach you everything you need to know about server actions in the Next.js app router. You will learn:
How to use server actions in React server components (via form action)
How to use server actions in client components
How to use server actions with React Hook Form & Zod validation
How to use useFormState and useFormStatus
How to handle errors in server actions (with useFormState and React Hook Form)
How to enable progressive enhancement so your website works without JavaScript
How to create reusable components with Tailwind CSS, forwardRef, and TypeScript
How to use Vercel Blob Storage and Vecel Postgres together with Prisma ORM (with fulltext search & pagination)
How to handle caching & (dynamic) metadata in Next.js (generateMetadata & generateStaticParams)
How to create an admin dashboard protected by Clerk authentication
How to set up and use Tailwind CSS together with Prettier and Shadcn UI components

Sign up for Clerk: https://clerk.com/?utm_source=sponsor...

Project files:
Starting code: https://github.com/codinginflow/nextj...
Logo & placeholder: https://github.com/codinginflow/nextj...
Favicon: https://github.com/codinginflow/nextj...
Seed script & data: https://github.com/codinginflow/nextj...
Cities list: https://github.com/codinginflow/nextj...

⭐ Get my fullstack Next.js with Express & TypeScript course: https://codinginflow.com/nextjs
✅ Get my free React Best Practices course: https://www.codinginflow.com/reactbes...
Join my newsletter for regular web dev tips: https://codinginflow.com/newsletter
Join our developer community on Discord: https://codinginflow.com/discord

Follow Coding in Flow on social media:
Twitter:   / codinginflow  
Instagram:   / codinginflow  
TikTok:   / codinginflow  
Facebook:   / codinginflow  

Timestamps:
0:00 Intro & project overview
13:28 Next.js project setup
24:19 Shadcn UI Setup
31:00 Vercel Postgres, Vercel Blob & Prisma setup
42:35 Job list server component
1:09:06 Server action in server component (Job filter sidebar)
1:54:02 Filter results from URL search params + useFormStatus
2:22:27 Navbar, footer, metadata
2:38:25 React Hook Form + Zod validation
4:16:14 Server action in client component (+ file upload)
4:37:26 Job details page (Reactmarkdown, generateStaticParams, generateMetadata, React cache)
5:11:41 Clerk authentication (Admin dashboard) + middelware.ts
5:26:20 UseFormState (Approve/delete jobs)
6:00:35 Pagination (Prisma & PostgreSQL)
6:13:43 Deployment (Vercel)