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: [ Ссылка ]
Project files:
Starting code: [ Ссылка ]
Logo & placeholder: [ Ссылка ]
Favicon: [ Ссылка ]
Seed script & data: [ Ссылка ]
Cities list: [ Ссылка ]
⭐ Get my full-stack Next.js with Express & TypeScript course: [ Ссылка ]
✅ Get my free React Best Practices course: [ Ссылка ]
💌 Join my newsletter for regular web dev tips: [ Ссылка ]
💬 Join our developer community on Discord: [ Ссылка ]
📣 Follow Coding in Flow on social media:
Twitter: [ Ссылка ]
Instagram: [ Ссылка ]
TikTok: [ Ссылка ]
Facebook: [ Ссылка ]
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)
