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

[@PattyBeautCode]

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

[@pranayprajapati5275]

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

[@uixmat]

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

[@karendoran3692]

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

[@AnindoSarker]

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

[@waggadash]

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

[@renatomignogna6895]

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

[@jacquitratongamanahaja979]

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

[@Unghaliloruvan]

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

[@tunaralyarzada]

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 💥

[@NOTHING-en2ue]

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

[@buzz.r.lightyear]

Super. That is exactly what I was looking for!

[@blazi_0]

Very very well done tutorial love it ❤

[@dimasmusa221]

thanks for the tutor man, this is cool

[@vikasni95]

Thank you for this wonderful content 😊

[@EK-rp8jp]

Omg best server action tutorial 🎉

[@MrElio74]

Thanks for doing your videos. Appreciate it

[@peterabiodunokusolubo1541]

This is the best tutorial so far on server actions

[@fatihcan5890]

Best tutor evaa bro thanks a lot !!

[@bhavikshah5869]

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]

I’m Glad it was helpful!💯💪🏽

[@IvoTsochev]

Thanks for the video Sonny!

[@mikail_dev]

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

[@souravmehta5143]

Oh bro! Was just waiting n finding this

[@user-vv3mn5zj2h]

Very good explaining thanks so much for this

[@pk5388]

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

[@CodingWithTaaxo]

I'm really glad I watched this video

[@programmingwithnit5308]

Thank you brother

[@gowthamk5969]

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

[@marioskanellopoulos8780]

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]

Thank you Mario I appreciate you!!!

[@dainsleif3122]

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

[@salahiddinediouri280]

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

[@madhumitamiddya702]

Sonny keeps his promises all the time

[@dalestewart]

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

[@developerpranav]

Server actions are really cool, and so are your tutorials. Would love to see one for optimistic updates!

[@sudeshryan8707]

Wt is cool here? Wt problem does it solve? Its apparently Just a over complicated way to achieve the same thing

[@DigitalAlchemyst]

​@sudeshryan8707 it's all about the way it renders and speed and efficiency, you should pay attention to the video

[@h_maina]

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.

[@tomspatula616]

Great video !! thanks a lot

[@alexg7282]

Thx !

[@chineducornelius6076]

Nice one Sonny, thanks 👍

[@hyper_channel]

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

[@user-xz8bp5eb4d]

You save me lots of time

[@kyle-andrewgovinder9902]

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

[@Ashish-_-]

Neat explanation!

[@deddyprianto3979]

you are hero Sony thankyou ❤

[@nicocouss7849]

Top thx a lot!

[@Nicolas0325]

Thx sonny!

[@ahmedabdelgawad2684]

Good vid, Thanks

[@nimanjagligovic2339]

Wooo let's GO ❤

[@umargulzar2982]

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

[@beastnighttv]

amazing stuff!

[@sicario55]

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

[@SonnySangha]

Thank you!

[@sumitpaul3263]

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

[@fear0ne]

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?

[@failasuf950]

totally liked it. make video how to delate data plz

[@ConorChepenik]

Great video

[@___ruthless]

Sonny you are a g mate

[@JohnnySalami-jo4jh]

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?

[@elmirshidev]

Nice❤

[@Tkamsker]

You are a great teacher thank you

[@SonnySangha]

Thank you! 😃 #PAPAFAM

[@CoderSineNomine]

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

[@masterv2.045]

you fucking rock master keep it up

[@jeffmlb256]

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

[@SonnySangha]

❤️💯

[@tauqeerhusain7521]

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

[@appstuff6565]

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

[@leofaizan8886]

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

[@crim-son]

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

[@lakshaymanchanda2322]

crazy!

[@alexandremezeray1502]

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?

[@didheemose]

This video make to me to subscribe your channel ❤

[@mohammadmoaid5282]

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

[@amitsaini000]

awesome

[@noeldolan518]

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

[@dainsleif3122]

Next.js got even faster.. 13.5.2 ❤

[@sharjilkhan7933]

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

[@davidkilamlya7630]

Hello Sonny, can you prepare the NextJs 13.4 full course

[@ajaysh73]

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

[@parkerrex]

bro perfect timing :-)

[@SonnySangha]

Haha I do try!! 🙏🏽

[@appstuff6565]

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]

@22:59

[@oliver1231033]

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

[@SonnySangha]

Awesome Il create a vid on it🔥

[@piyushkapoor5195]

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

[@NeoCoding]

that's important things you teach ths

[@learnearn8721]

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

[@MaKTaiL]

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

[@mikail_dev]

We would love a tutorial on useOptimistic hook.

[@sharurocky8379]

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

[@maroofali9679]

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

[@aguud]

nice video

[@friendofyou743]

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

[@agvaandanzanjargalsaikhan4820]

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

[@latch909]

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

[@BrandonFunk]

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

[@datamagaldadze1134]

can you make videos about dynamic routes? api routes?

[@ayushshende4290]

I am new to NextJs and I am confused about the distinction between server actions and route handlers. When should we use which one?

[@robinsedeqi2535]

I tried the same code and approach but i got nothing but an empty page. I really don't know where I have made a mistake or something is wrong

[@prafullb4652]

is server actions always expect formData.? Can it be passed directly without converting to formData.? @Sonny Sangha

[@darelbvcr687]

how to do it with prisma?

[@Techcabz-wh6he]

What if I have mongodb? I still need to create 'api/product ' to handle my POST request right?

[@anowarulhassan5117]

Hello, I got stucked to implement google adsense to my newly released nextjs 13.4(App Router) project. I tried most of the tutorials which I found on google search and youtube search and didnot found any solutions to implement google adsense. I tried many npm packages also but they didnot worked for me. Please, make a complete video tutorial on how we can implement google adsense on Nextjs 13.4(app router) without losing SSR.

[@alsherifkhalaf7385]

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

[@aminjafarlou8919]

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]

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.

[@czancdy144]

please make a video on optimistic updates

[@SonnySangha]

You got it!