Learn Next.js 13.4 Server Actions in 24 minutes (For beginners)

Рет қаралды 64,745

Күн бұрын

🚨 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

@uixmat 6 ай бұрын

Love your tutorials mate, so well articulated and structured. Absolute gem 💎

@PattyBeautCode 10 ай бұрын

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 🔥🔥

@fatihcan5890 8 ай бұрын

Best tutor evaa bro thanks a lot !!

@renatomignogna6895 2 ай бұрын

Awesome explanation Sonny, straight to the point - and covers all the things I needed to know, much appreciated

@waggadash 7 ай бұрын

I am stunned ... so much value! Thanks a lot Sonny

@pranayprajapati5275 10 ай бұрын

Nextjs just keeps getting better. Thanks sonny for keeping up with the pace.

@NOTHING-en2ue 9 ай бұрын

i finally understand this, very great tutorial, thanks a lot ❤

@bhavikshah5869 10 ай бұрын

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!💯💪🏽

@karendoran3692 10 ай бұрын

One of the best explanations on a coding topic I have ever heard!!

@blazi_0 9 ай бұрын

Very very well done tutorial love it ❤

@AnindoSarker 9 ай бұрын

Ohh my goodness this tutorial is soooo good I literally changed my whole career after I started watching your tutorial. Thank you 🙏

@jacquitratongamanahaja979 10 ай бұрын

This is an epic bro, I really love your explanation as well as the way you present it. Thank you so much.

@dimasmusa221 8 ай бұрын

thanks for the tutor man, this is cool

@vikasni95 7 ай бұрын

Thank you for this wonderful content 😊

@buzz.r.lightyear 10 ай бұрын

Super. That is exactly what I was looking for!

@peterabiodunokusolubo1541 24 күн бұрын

This is the best tutorial so far on server actions

@Unghaliloruvan 10 ай бұрын

u r doing awesome job bro!! we are excited to learn more advanced features in Nextjs 🤩

@MrElio74 10 ай бұрын

Thanks for doing your videos. Appreciate it

@IvoTsochev 10 ай бұрын

Thanks for the video Sonny!

@tunaralyarzada 10 ай бұрын

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 💥

@souravmehta5143 10 ай бұрын

Oh bro! Was just waiting n finding this

@marioskanellopoulos8780 10 ай бұрын

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!!!

@EK-rp8jp 8 ай бұрын

Omg best server action tutorial 🎉

@user-vv3mn5zj2h 5 ай бұрын

Very good explaining thanks so much for this

@developerpranav 10 ай бұрын

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

@dainsleif3122 7 ай бұрын

Thank you so much for explaining useTransition hook!! I didn't even know about it. That is so useful!! amazing.

@mikail_dev 15 күн бұрын

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

@tomspatula616 2 ай бұрын

Great video !! thanks a lot

@programmingwithnit5308 8 ай бұрын

Thank you brother

@alexg7282 7 ай бұрын

Thx !

@pk5388 10 ай бұрын

you video is great sonny! i'm just start learning nextjs and your video helping me a lot keep going brooo

@salahiddinediouri280 10 ай бұрын

this is a really cool tuto about a cool feature ( server actions ) , thank you for share it

@gowthamk5969 9 ай бұрын

Thanks man . Very informative difficult to find videos on latest releases of next js & also mockup api is so cool 🥺

@chineducornelius6076 10 ай бұрын

Nice one Sonny, thanks 👍

@CodingWithTaaxo 9 ай бұрын

I'm really glad I watched this video

@Ashish-_- 3 ай бұрын

Neat explanation!

@user-xz8bp5eb4d 3 ай бұрын

You save me lots of time

@hyper_channel 5 ай бұрын

Good video mate, coming from traditional Next, app router did bring a few new flows, quite handy.

@sicario55 10 ай бұрын

Well explained.....thorough, untangling what's in alpha shows skills 💯

@SonnySangha 10 ай бұрын

Thank you!

@dalestewart 10 ай бұрын

Server actions are very beneficial. It would be great to see a video on optimistic updates.

@deddyprianto3979 10 ай бұрын

you are hero Sony thankyou ❤

@h_maina 9 ай бұрын

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.

@Nicolas0325 10 ай бұрын

Thx sonny!

@nicocouss7849 9 ай бұрын

Top thx a lot!

@ahmedabdelgawad2684 9 ай бұрын

Good vid, Thanks

@beastnighttv 10 ай бұрын

amazing stuff!

@Tkamsker 10 ай бұрын

You are a great teacher thank you

@SonnySangha 10 ай бұрын

Thank you! 😃 #PAPAFAM

@umargulzar2982 10 ай бұрын

Nice video totally liked it. Please create a full video on Next.Js any clone..

@nimanjagligovic2339 10 ай бұрын

Wooo let's GO ❤

@madhumitamiddya702 10 ай бұрын

Sonny keeps his promises all the time

@ConorChepenik 9 ай бұрын

Great video

@sumitpaul3263 10 ай бұрын

Sir can you please explain about sharing data and state between server components and client components

@___ruthless 7 ай бұрын

Sonny you are a g mate

@failasuf950 10 ай бұрын

totally liked it. make video how to delate data plz

@tauqeerhusain7521 10 ай бұрын

Biggggg love you sir ❤❤❤❤❤❤❣❣❣❣❣

@elmirshidev 10 ай бұрын

Nice❤

@jeffmlb256 9 ай бұрын

Sonny never disappoints ! I don't even know how to rate this level of skills

@SonnySangha 9 ай бұрын

❤️💯

@masterv2.045 8 ай бұрын

you fucking rock master keep it up

@fear0ne 9 ай бұрын

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?

@parkerrex 10 ай бұрын

bro perfect timing :-)

@SonnySangha 10 ай бұрын

Haha I do try!! 🙏🏽

@lakshaymanchanda2322 Ай бұрын

crazy!

@JohnnySalami-jo4jh 8 ай бұрын

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?

@didheemose 9 ай бұрын

This video make to me to subscribe your channel ❤

@amitsaini000 10 ай бұрын

awesome

@appstuff6565 7 ай бұрын

note to self: @21:30 docs nextjs for different formactions even buttons can use?

@kyle-andrewgovinder9902 6 ай бұрын

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

@oliver1231033 10 ай бұрын

looking forward to useOptmistic and state management with server action (maybe compared to useEffect

@SonnySangha 10 ай бұрын

Awesome Il create a vid on it🔥

@CoderSineNomine 10 ай бұрын

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..

@noeldolan518 4 ай бұрын

Great video. :). BTW what tools are you using to sketch UI @ 7:38?

@learnearn8721 10 ай бұрын

please put a video on optimistic update video. thanks in advance

@appstuff6565 7 ай бұрын

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

@alexandremezeray1502 6 ай бұрын

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?

@crim-son 8 ай бұрын

How do we make success feedbacks, and error messages when things go wrong?... Thanks for the tutorial ❤

@mohammadmoaid5282 8 ай бұрын

what about if we have a file input field in the form, how to handle it?

@NeoCoding 6 ай бұрын

that's important things you teach ths

@sharjilkhan7933 10 ай бұрын

@sonny, are you using github copilot? Can you please make a video on that about your experience of using it?

@aguud 4 ай бұрын

nice video

@leofaizan8886 8 күн бұрын

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

@datamagaldadze1134 10 ай бұрын

can you make videos about dynamic routes? api routes?

@sharurocky8379 10 ай бұрын

Very useful video ❤ Can u make a redux toolkit with nextjs 13.4 videoo.....

@mikail_dev 15 күн бұрын

We would love a tutorial on useOptimistic hook.

@ajaysh73 8 ай бұрын

Can someone tell the extension that was suggested code most likely predictive that was used while coding? Thanks..

@dainsleif3122 7 ай бұрын

Next.js got even faster.. 13.5.2 ❤

@piyushkapoor5195 6 ай бұрын

@Sonny a liitle doubt - are server actions secure like can i use api keys and credentials while fetching

@maroofali9679 8 ай бұрын

Which Extention you are using for this files folder icons can you or anyone tell me ?

@davidkilamlya7630 8 ай бұрын

Hello Sonny, can you prepare the NextJs 13.4 full course

@MaKTaiL 9 ай бұрын

What if I use prisma to update and fetch from my DB, how can I revalidade it?

@czancdy144 10 ай бұрын

please make a video on optimistic updates

@SonnySangha 10 ай бұрын

You got it!

@latch909 10 ай бұрын

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

@friendofyou743 9 ай бұрын

hey bro, small doubt how to add canonical tag for every url in next js 13

@electricindro2236 10 ай бұрын

Please explain how useOptimistic hook works as well. Thanks for this tutorial.

@SonnySangha 10 ай бұрын

You got it! On the way!!

@electricindro2236 10 ай бұрын

@@SonnySangha Thanks a lot! Really appreciate it ♥️

@agvaandanzanjargalsaikhan4820 10 ай бұрын

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

@marcogomesrd 10 ай бұрын

can you make an app using DDD in the front-end side?

@darelbvcr687 7 ай бұрын

how to do it with prisma?

@BrandonFunk 8 ай бұрын

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 : )

@alsherifkhalaf7385 9 ай бұрын

what if I am fetching data with Prisma , how can i use revalidateTag ?

@guled669 10 ай бұрын

How do you clear the input, how to handle validations

@aminjafarlou8919 9 ай бұрын

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?

@pleasejustletmebeanonymous6510 8 ай бұрын

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.