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)