Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

Next.js: Authentication ※ Best practices for Server Components, Server Actions, and Middleware ※ Patterns like Data Access Layers, API Minimization, and Data Transfer Objects Also, aside from headshots, this video is entirely built in React 🤯

Delba

75,417 subscribers

116,318 views • 2 years ago •via X (Twitter)

Science & Technology Education

Anya Rossi• Live Now

Private livecam show

10 Comments

Delba2 years ago

HQ:

Lee Robinson2 years ago

That background music has me feeling like I'm at a SPA... get it... 😂

Delba2 years ago

Lean back, relax, and roll your own auth :mild-panic:

Mona Aghili2 years ago

As I listened to your warm voice and the background music I found myself waiting for you to say Take a deep breath in and exhale.😅

Delba2 years ago

Haha, yea you need it with auth 💆‍♀️

Bilal2 years ago

Thanks - need more guided meditation videos like this on these gnarly topics. :)

Delba2 years ago

🫡🧘‍♀️

Pedro Duarte2 years ago

legeeeeeeend

Delba2 years ago

The coveted Pedro legend comment 🥹

Fabio Coelho2 years ago

love this video effect 😍

Related Videos

"How do I exclude server actions from middleware in Next.js?" 👇

"How do I exclude server actions from middleware in Next.js?" 👇

Alex Sidorenko

23,415 views • 11 months ago

Server actions vs API routes in Next.js

Server actions vs API routes in Next.js

Alex Sidorenko

59,223 views • 1 year ago

Streaming data from server to client with "use" in Next.js

Streaming data from server to client with "use" in Next.js

Alex Sidorenko

36,533 views • 1 year ago

Server-side search with Next.js 13 and server components

Server-side search with Next.js 13 and server components

Alex Sidorenko

208,520 views • 2 years ago

📹 Self-Hosting Next.js Learn how to deploy Next.js, Postgres, and Nginx to a $4 VPS with Docker. I'll explain how to use and configure Next.js features like image optimization, caching & ISR, streaming, middleware, server components, and more. Demo app is open source!

📹 Self-Hosting Next.js Learn how to deploy Next.js, Postgres, and Nginx to a $4 VPS with Docker. I'll explain how to use and configure Next.js features like image optimization, caching & ISR, streaming, middleware, server components, and more. Demo app is open source!

Lee Robinson

568,120 views • 1 year ago

Expo + React Server Components (preview) 🚀 Just open sourced a new movies app demo using Expo Router and React server functions. Native data fetching, loading states, and error handling have never been this easy! → Runs on iOS, Web, and Android

Expo + React Server Components (preview) 🚀 Just open sourced a new movies app demo using Expo Router and React server functions. Native data fetching, loading states, and error handling have never been this easy! → Runs on iOS, Web, and Android

Evan Bacon 🥓

72,117 views • 1 year ago

Pagination in Next.js 13 with server components

Pagination in Next.js 13 with server components

Alex Sidorenko

140,144 views • 2 years ago

In the latest `swr@beta`, you can seamlessly move data fetching between client-side and server-side, or both, in an RSC framework like Next.js: 🔸Client only: useSWR(key, fetcher) 🔹Mixed: useSWR(key, fetcher) + RSC-provided data 🔸Server only: useSWR(key) + RSC-provided data

In the latest `swr@beta`, you can seamlessly move data fetching between client-side and server-side, or both, in an RSC framework like Next.js: 🔸Client only: useSWR(key, fetcher) 🔹Mixed: useSWR(key, fetcher) + RSC-provided data 🔸Server only: useSWR(key) + RSC-provided data

Shu

267,424 views • 2 years ago

Are React Server Components web-only or can they be used anywhere? What would it look like if @Expo added React Server Components for native iOS and Android platforms... 🧵 Find out now ↓

Are React Server Components web-only or can they be used anywhere? What would it look like if @Expo added React Server Components for native iOS and Android platforms... 🧵 Find out now ↓

Evan Bacon 🥓

233,085 views • 3 years ago

A 1-hour introduction to Next.js and React 🎥 This mini course is designed for beginners, but if you've used Next.js before, hopefully you'll still pick up some new tips. We'll build a quiz app using Postgres, starting from React basics and going all the way to Server Actions!

A 1-hour introduction to Next.js and React 🎥 This mini course is designed for beginners, but if you've used Next.js before, hopefully you'll still pick up some new tips. We'll build a quiz app using Postgres, starting from React basics and going all the way to Server Actions!

Lee Robinson

166,763 views • 2 years ago

When to use Server vs Client components in Next.js 13

When to use Server vs Client components in Next.js 13

Alex Sidorenko

148,146 views • 2 years ago

"How can I use server components for data fetching if all my components also need hooks or onClick?" Move the interactive part into a separate component

"How can I use server components for data fetching if all my components also need hooks or onClick?" Move the interactive part into a separate component

Alex Sidorenko

50,595 views • 1 year ago

Infinite scroll in Next.js 13 with server actions

Infinite scroll in Next.js 13 with server actions

Alex Sidorenko

166,418 views • 2 years ago

🚀 Rocket tracking app with Expo Router and React Server Components! ◆ Started with DOM Components ◆ Migrated to native one route at a time ◆ iOS, Android, web, even runs in Expo Go! ◆ Data fetched securely on the server, no hooks needed ◆ Offline support for layouts, loading, scrolling, animations, transitions, and error states We're just getting started ⚡️

🚀 Rocket tracking app with Expo Router and React Server Components! ◆ Started with DOM Components ◆ Migrated to native one route at a time ◆ iOS, Android, web, even runs in Expo Go! ◆ Data fetched securely on the server, no hooks needed ◆ Offline support for layouts, loading, scrolling, animations, transitions, and error states We're just getting started ⚡️

Evan Bacon 🥓

25,393 views • 1 year ago

Demo of forms with React 19 and Next.js. If you've wondered... "Why does the form clear out my input values?" "How do I pass data from my server action → client?" "How do I handle client / server validation?" "How do I display inline errors next to inputs?" This should help!

Demo of forms with React 19 and Next.js. If you've wondered... "Why does the form clear out my input values?" "How do I pass data from my server action → client?" "How do I handle client / server validation?" "How do I display inline errors next to inputs?" This should help!

Lee Robinson

42,736 views • 1 year ago

This was entirely built using Claude AI in React Native It's made with Reanimated for animations, gesture handler, async storage for data persistence and react navigation in Cursor Composer. You can learn from scratch in our 6-hour course:

This was entirely built using Claude AI in React Native It's made with Reanimated for animations, gesture handler, async storage for data persistence and react navigation in Cursor Composer. You can learn from scratch in our 6-hour course:

DesignCode

65,856 views • 1 year ago

Just shipped a new Next.js template! • Uses Postgres and Drizzle for the database • UI components with Tailwind and shadcn/ui • Email/password authentication with JWTs stored to cookies • Dashboard pages with CRUD operations on users/teams • Basic RBAC with Owner and Member roles • Pricing page (/) which connects to Stripe Checkout • Subscription management with Stripe Customer Portal • Global middleware to protect logged-in routes • Local middleware to protect Server Actions / validate schemas • Activity logging system for any user events It's not finished, and there's probably bugs, but it's time to ship 🫡 • Demo: • Code:

Just shipped a new Next.js template! • Uses Postgres and Drizzle for the database • UI components with Tailwind and shadcn/ui • Email/password authentication with JWTs stored to cookies • Dashboard pages with CRUD operations on users/teams • Basic RBAC with Owner and Member roles • Pricing page (/) which connects to Stripe Checkout • Subscription management with Stripe Customer Portal • Global middleware to protect logged-in routes • Local middleware to protect Server Actions / validate schemas • Activity logging system for any user events It's not finished, and there's probably bugs, but it's time to ship 🫡 • Demo: • Code:

Lee Robinson

362,516 views • 1 year ago

Day 8: React Server Components

Day 8: React Server Components

srgm

16,570 views • 11 months ago

Introducing Derivative Data MCP Server With Laevitas, Units can now access and analyze funding rates, open interest and other real-time derivative data across exchanges.

Introducing Derivative Data MCP Server With Laevitas, Units can now access and analyze funding rates, open interest and other real-time derivative data across exchanges.

REI Network

17,658 views • 1 year ago