Learn Next.js 13.4 Server Actions in 24 minutes (For beginners)
HTML-код
- Опубликовано: 16 июн 2024
- 🚨 Join my course Zero to Full Stack Hero: www.papareact.com/course
Next.js 13.4 just levelled up, bringing an important upgrade - the introduction of server actions. In this video, I will show you how to use them and why they might save you a significant amount of time and hassle by doing so!
🔴 LOOKING FOR THE CODE FROM THE BUILDS? 🛠️
links.papareact.com/github
📩 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up for the PAPAFAM Newsletter here 👉 links.papareact.com/newsletter
👇🏻FOLLOW ME HERE:
Instagram: links.papareact.com/instagram
Facebook: links.papareact.com/facebook
LinkedIn: links.papareact.com/linkedin
Twitter: links.papareact.com/twitter
Discord: links.papareact.com/discord
💰 WANT TO SUPPORT THE CHANNEL?
Donate here: links.papareact.com/donate
Grab some PAPA Merch: links.papareact.com/merch
🕐 TIMESTAMPS:
00:00 Introduction
00:12 Benefits of Server Actions
00:38 Enabling Server Actions Feature
01:42 Building a Product Warehouse Example
03:16 Implementing MockAPI for the Backend
04:54 Adding an async / await function without caching
06:40 Explaining why we Need Server Actions (w/ Visuals)
08:10 Implementing a Server Action in a Server Component
11:49 Fixing the UI Update Problem with Tags
13:42 Explaining Progressive Enhancement
13:58 Explaining why Server Actions are Composable
15:37 revalidateTag vs revalidatePath
16:26 Implementing a Server Action in a Client Component
20:26 Adding multiple Server Actions
21:27 Explaining why startTransition disables Progressive Enhancement
23:09 Quick brief on useOptimistic Hook
23:53 Server Actions Summary
24:26 Outro
Let’s get it PAPAFAM 🔥.
#nextjs #reactjs #serveractions #tutorial #javascript #beginner #webdevelopment #tailwindcss
Again.... Sonny has always breaking something complicate to small pieces
and train us to think along side with his lessons - tutorials and give us some example so we can code better ourself later.
Thanks Sonny ! Please Don't stop doing this 🔥🔥
Ohh my goodness this tutorial is soooo good
I literally changed my whole career after I started watching your tutorial. Thank you 🙏
Learning server actions from your video was so much easier than diving into the docs. Thanks Sonny! Looking forward to the caching and optimistic update videos!
I’m Glad it was helpful!💯💪🏽
Awesome explanation Sonny, straight to the point - and covers all the things I needed to know, much appreciated
Nextjs just keeps getting better. Thanks sonny for keeping up with the pace.
Love your tutorials mate, so well articulated and structured. Absolute gem 💎
Very huge Thank you, man! That's literally the tutorial that i has been looking for! For next tutorials, I would ask you to make a video about "Caching" in details (Both CDN and Client-side caching) in Next js 13 💥
I am stunned ... so much value! Thanks a lot Sonny
This is an epic bro, I really love your explanation as well as the way you present it. Thank you so much.
One of the best explanations on a coding topic I have ever heard!!
Pretty useful and explanatory video as alwasy Sonny. You never let us down man. Papafam is the best choice I've ever made!!! Sending tons of love at your side my friend
Thank you Mario I appreciate you!!!
Server actions are really cool, and so are your tutorials. Would love to see one for optimistic updates!
Wt is cool here? Wt problem does it solve?
Its apparently Just a over complicated way to achieve the same thing
@sudeshryan8707 it's all about the way it renders and speed and efficiency, you should pay attention to the video
Super. That is exactly what I was looking for!
u r doing awesome job bro!! we are excited to learn more advanced features in Nextjs 🤩
i finally understand this, very great tutorial, thanks a lot ❤
Sonny, Sonny, Sonny, what a man you are. You help people get jobs and also help them keep those jobs. Thanks for the great content.
Thank you very much. I was struggling with the data refetch concept. and even though I have no knowledge in typescript you explained it very well. Thanks again
Thanks for doing your videos. Appreciate it
This is the best tutorial so far on server actions
Oh bro! Was just waiting n finding this
you video is great sonny! i'm just start learning nextjs and your video helping me a lot keep going brooo
Thank you so much for explaining useTransition hook!! I didn't even know about it. That is so useful!! amazing.
Thanks man . Very informative difficult to find videos on latest releases of next js & also mockup api is so cool 🥺
Thanks for the video Sonny!
Very good explaining thanks so much for this
Omg best server action tutorial 🎉
Thank you for this wonderful content 😊
Well explained.....thorough, untangling what's in alpha shows skills 💯
Thank you!
I'm really glad I watched this video
this is a really cool tuto about a cool feature ( server actions ) , thank you for share it
Server actions are very beneficial. It would be great to see a video on optimistic updates.
Very very well done tutorial love it ❤
thanks for the tutor man, this is cool
Great video !! thanks a lot
Good video mate, coming from traditional Next, app router did bring a few new flows, quite handy.
Best tutor evaa bro thanks a lot !!
Sonny keeps his promises all the time
Nice one Sonny, thanks 👍
Left field comment, I know, but Sonny is such a catch. Brilliant, handsome, charismatic. You were heavily favored when your specs were being drawn up
You are a great teacher thank you
Thank you! 😃 #PAPAFAM
Good vid, Thanks
amazing stuff!
You save me lots of time
Neat explanation!
Sonny never disappoints ! I don't even know how to rate this level of skills
❤️💯
Nice video totally liked it.
Please create a full video on Next.Js any clone..
you are hero Sony thankyou ❤
Thank you brother
Top thx a lot!
Wooo let's GO ❤
Thx sonny!
Great video
totally liked it. make video how to delate data plz
Sir can you please explain about sharing data and state between server components and client components
Thx !
Sonny you are a g mate
Nice❤
Hi Sonny, this is a great explanation of the new server functionality, can you tell me where would i need to add this revalidateTage when am using Prisma for database interactions?
bro perfect timing :-)
Haha I do try!! 🙏🏽
Biggggg love you sir ❤❤❤❤❤❤❣❣❣❣❣
crazy!
awesome
Hi Sonny, great video as always. A question for you, is it a bad practice to fetch api on client components and convert them to async? still getting used to server-client logic of next js and i have big dilemma! thx..
It's definitely going to take some getting used to...could there be any potential pitfalls to not attaching state to the input fields and avoiding JS?
looking forward to useOptmistic and state management with server action (maybe compared to useEffect
Awesome Il create a vid on it🔥
you fucking rock master keep it up
You're great! thank you! you've gained a subscriber ;)
I've got a little question. Do you think it would be possible to add new cards, for example, by listening to a kafka topic? I know there's a kafkajs library. I've managed to consume the data from a topic but I don't know how to add an element to my page based on the new kafka messages :/
I thought the use server could do the job but I don't see how. Do you have an idea?
nice video
Great video. :). BTW what tools are you using to sketch UI @ 7:38?
great vid as always.
Can someone please explain whats the difference between revalidate tag and fetching the API again? both are same on paper. Thanks
@sonny, are you using github copilot? Can you please make a video on that about your experience of using it?
that's important things you teach ths
This video make to me to subscribe your channel ❤
We would love a tutorial on useOptimistic hook.
Next automatically imports the types globally if you rename 'typings.d.ts' to 'types.d.ts' so you don't have to declare type imports on each file
please put a video on optimistic update video. thanks in advance
Hello Sonny, can you prepare the NextJs 13.4 full course
Very useful video ❤
Can u make a redux toolkit with nextjs 13.4 videoo.....
How do we make success feedbacks, and error messages when things go wrong?... Thanks for the tutorial ❤
can you make videos about dynamic routes? api routes?
Next.js got even faster.. 13.5.2 ❤
@Sonny a liitle doubt - are server actions secure like can i use api keys and credentials while fetching
I am new to NextJs and I am confused about the distinction between server actions and route handlers. When should we use which one?
please make a video on optimistic updates
You got it!
in my project i am using server actions with tanstack query. What is ur opinion about that? is it good way to go or not
Sonny thanks so much for the amazing content ♥. I had a question about NextJS13 and did not have any luck finding a satisfying answer on the net. How can we benefit from server side rendering features when we are using a UI library like Mantine or AntD? The problem that I have is that these libraries need a provider to wrap the entire app. However, if we do this all of our content should be inside client-side pages and we simply cannot use server-side for any page. How can we handle this issue?
Have you checked if that is actually the case? As far as I understand, you can use server components inside client components as long you don't directly reference it inside the client component. By that I mean, the provider will render {children} rather than . So, as long as the component that references the provider is not a client component, you can still use server components as the children passed to the provider.
hey sunny thanks for this! I wanted to ask how can we do a onclick on the added products so it leads us to their respective urls? Im using nextjs with supabase. Thanks!
@22:59
Can someone tell the extension that was suggested code most likely predictive that was used while coding? Thanks..
note to self: @21:30 docs nextjs for different formactions even buttons can use?
How do you clear the input, how to handle validations
Please explain how useOptimistic hook works as well. Thanks for this tutorial.
You got it! On the way!!
@@SonnySangha Thanks a lot! Really appreciate it ♥️
what about if we have a file input field in the form, how to handle it?
can you make an app using DDD in the front-end side?
Hey Sonny, what is the repo name of the above tutorial.
Which Extention you are using for this files folder icons can you or anyone tell me ?
Maybe in a soon feature this become game changer! Thanks a lot. In your implementation server actions - how we can clear form after submitting? I try to ask chatGPT but only one they to do it - convert form to 'use client' Isn`t it?
I have Same doubt, After submitting i want to redirect to next page. How can we achieve this?
I think just use useRouter from "next/navigation" google to got example @@PATILTANMAYVIJAY
I’m really curious how this would work with Prisma? Especially with the tags. I’m currently using Prisma to update my database at PlanetScale.
Il take a look!
hey bro, small doubt how to add canonical tag for every url in next js 13
what if I am fetching data with Prisma , how can i use revalidateTag ?
What if I use prisma to update and fetch from my DB, how can I revalidade it?