Learn Next.js 13.4 Server Actions in 24 minutes (For beginners)
🚨 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
Пікірлер: 150
Love your tutorials mate, so well articulated and structured. Absolute gem 💎
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 🔥🔥
Nextjs just keeps getting better. Thanks sonny for keeping up with the pace.
This is an epic bro, I really love your explanation as well as the way you present it. Thank you so much.
Awesome explanation Sonny, straight to the point - and covers all the things I needed to know, much appreciated
One of the best explanations on a coding topic I have ever heard!!
Ohh my goodness this tutorial is soooo good I literally changed my whole career after I started watching your tutorial. Thank you 🙏
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 💥
u r doing awesome job bro!! we are excited to learn more advanced features in Nextjs 🤩
Super. That is exactly what I was looking for!
Thanks for doing your videos. Appreciate it
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!
@SonnySangha
10 ай бұрын
I’m Glad it was helpful!💯💪🏽
I am stunned ... so much value! Thanks a lot Sonny
Thanks man . Very informative difficult to find videos on latest releases of next js & also mockup api is so cool 🥺
you video is great sonny! i'm just start learning nextjs and your video helping me a lot keep going brooo
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
This is the best tutorial so far on server actions
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
@SonnySangha
10 ай бұрын
Thank you Mario I appreciate you!!!
this is a really cool tuto about a cool feature ( server actions ) , thank you for share it
Thanks for the video Sonny!
i finally understand this, very great tutorial, thanks a lot ❤
Server actions are very beneficial. It would be great to see a video on optimistic updates.
Very good explaining thanks so much for this
Good video mate, coming from traditional Next, app router did bring a few new flows, quite handy.
Best tutor evaa bro thanks a lot !!
Oh bro! Was just waiting n finding this
Very very well done tutorial love it ❤
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.
Nice one Sonny, thanks 👍
Server actions are really cool, and so are your tutorials. Would love to see one for optimistic updates!
@sudeshryan8707
10 ай бұрын
Wt is cool here? Wt problem does it solve? Its apparently Just a over complicated way to achieve the same thing
@DigitalAlchemyst
8 ай бұрын
@sudeshryan8707 it's all about the way it renders and speed and efficiency, you should pay attention to the video
Thank you for this wonderful content 😊
thanks for the tutor man, this is cool
Great video !! thanks a lot
Thank you so much for explaining useTransition hook!! I didn't even know about it. That is so useful!! amazing.
I'm really glad I watched this video
Omg best server action tutorial 🎉
Nice video totally liked it. Please create a full video on Next.Js any clone..
Neat explanation!
Thank you brother
You save me lots of time
you are hero Sony thankyou ❤
Sonny keeps his promises all the time
Well explained.....thorough, untangling what's in alpha shows skills 💯
@SonnySangha
10 ай бұрын
Thank you!
amazing stuff!
Good vid, Thanks
Sir can you please explain about sharing data and state between server components and client components
Top thx a lot!
totally liked it. make video how to delate data plz
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?
Thx !
Thx sonny!
You are a great teacher thank you
@SonnySangha
10 ай бұрын
Thank you! 😃 #PAPAFAM
Great video
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..
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
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
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?
Sonny never disappoints ! I don't even know how to rate this level of skills
@SonnySangha
10 ай бұрын
❤️💯
Sonny you are a g mate
Wooo let's GO ❤
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?
How do we make success feedbacks, and error messages when things go wrong?... Thanks for the tutorial ❤
Biggggg love you sir ❤❤❤❤❤❤❣❣❣❣❣
note to self: @21:30 docs nextjs for different formactions even buttons can use?
Nice❤
@sonny, are you using github copilot? Can you please make a video on that about your experience of using it?
you fucking rock master keep it up
what about if we have a file input field in the form, how to handle it?
@Sonny a liitle doubt - are server actions secure like can i use api keys and credentials while fetching
please put a video on optimistic update video. thanks in advance
Great video. :). BTW what tools are you using to sketch UI @ 7:38?
Can someone tell the extension that was suggested code most likely predictive that was used while coding? Thanks..
looking forward to useOptmistic and state management with server action (maybe compared to useEffect
@SonnySangha
10 ай бұрын
Awesome Il create a vid on it🔥
Hello Sonny, can you prepare the NextJs 13.4 full course
awesome
We would love a tutorial on useOptimistic hook.
hey bro, small doubt how to add canonical tag for every url in next js 13
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
This video make to me to subscribe your channel ❤
What if I use prisma to update and fetch from my DB, how can I revalidade it?
Very useful video ❤ Can u make a redux toolkit with nextjs 13.4 videoo.....
can you make videos about dynamic routes? api routes?
bro perfect timing :-)
@SonnySangha
10 ай бұрын
Haha I do try!! 🙏🏽
Which Extention you are using for this files folder icons can you or anyone tell me ?
crazy!
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!
@appstuff6565
7 ай бұрын
@22:59
what if I am fetching data with Prisma , how can i use revalidateTag ?
nice video
How do you clear the input, how to handle validations
What if I have mongodb? I still need to create 'api/product ' to handle my POST request right?
Hey Sonny, what is the repo name of the above tutorial.
Can anyone tell me how to make the form clear after submitting a product? Do i need to use a use effect? or router.refresh()? im not quite sure how to achieve this, thanks for any help : )
that's important things you teach ths
I am new to NextJs and I am confused about the distinction between server actions and route handlers. When should we use which one?
Hello Developers, can anyone answer my question? When I implemented a function(addProductToDataBase) in the Form Action attribute, my browser console shows a javascript error (but everything works fine) action="javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')" From my understanding, isn't the action attribute only supposed to take a string and not a function?
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
In what sernario does progressvie enhancement actually be needed? Don't really understand this part.
is server actions always expect formData.? Can it be passed directly without converting to formData.? @Sonny Sangha
can you make an app using DDD in the front-end side?
Next.js got even faster.. 13.5.2 ❤