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)
[ad_2]
source
-
-
-
-
