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)