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=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 full-stack 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 (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)
Watch video Learn Next.js 14 Server Actions With This One Project (UseFormStatus, UseFormState, Error Handling) online without registration, duration hours minute second in high quality. This video was added by user Coding in Flow 05 January 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 48,486 once and liked it 1.8 thousand people.