Learn Next.js 14 Server Actions With This One Project (UseFormStatus, UseFormState, Error Handling)

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 full-text 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=sponsorship&utm_medium=youtube&utm_campaign=coding-in-flow&utm_content=1-5-2024 Project files: Starting code: https://github.com/codinginflow/nextjs-job-board/tree/0-Starting-Point Logo & placeholder: https://github.com/codinginflow/nextjs-job-board/tree/Final-Project/src/assets Favicon: https://github.com/codinginflow/nextjs-job-board/blob/Final-Project/src/app/favicon.ico Seed script & data: https://github.com/codinginflow/nextjs-job-board/tree/Final-Project/scripts Cities list: https://github.com/codinginflow/nextjs-job-board/blob/Final-Project/src/lib/cities-list.ts ⭐ Get my full-stack Next.js with Express & TypeScript course: https://codinginflow.com/nextjs ✅ Get my free React Best Practices course: https://www.codinginflow.com/reactbestpractices 💌 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: https://twitter.com/codinginflow Instagram: https://instagram.com/codinginflow TikTok: https://tiktok.com/@codinginflow Facebook: https://facebook.com/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 (React-markdown, 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)