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

  • @uixmat
    @uixmat6 ай бұрын

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

  • @PattyBeautCode
    @PattyBeautCode10 ай бұрын

    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
    @pranayprajapati527510 ай бұрын

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

  • @jacquitratongamanahaja979
    @jacquitratongamanahaja97910 ай бұрын

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

  • @renatomignogna6895
    @renatomignogna68952 ай бұрын

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

  • @karendoran3692
    @karendoran369210 ай бұрын

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

  • @AnindoSarker
    @AnindoSarker10 ай бұрын

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

  • @tunaralyarzada
    @tunaralyarzada10 ай бұрын

    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 💥

  • @Unghaliloruvan
    @Unghaliloruvan10 ай бұрын

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

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

    Super. That is exactly what I was looking for!

  • @MrElio74
    @MrElio7410 ай бұрын

    Thanks for doing your videos. Appreciate it

  • @bhavikshah5869
    @bhavikshah586910 ай бұрын

    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

    @SonnySangha

    10 ай бұрын

    I’m Glad it was helpful!💯💪🏽

  • @waggadash
    @waggadash7 ай бұрын

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

  • @gowthamk5969
    @gowthamk596910 ай бұрын

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

  • @pk5388
    @pk538810 ай бұрын

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

  • @mikail_dev
    @mikail_dev18 күн бұрын

    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

  • @peterabiodunokusolubo1541
    @peterabiodunokusolubo154128 күн бұрын

    This is the best tutorial so far on server actions

  • @marioskanellopoulos8780
    @marioskanellopoulos878010 ай бұрын

    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

    @SonnySangha

    10 ай бұрын

    Thank you Mario I appreciate you!!!

  • @salahiddinediouri280
    @salahiddinediouri28010 ай бұрын

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

  • @IvoTsochev
    @IvoTsochev10 ай бұрын

    Thanks for the video Sonny!

  • @NOTHING-en2ue
    @NOTHING-en2ue9 ай бұрын

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

  • @dalestewart
    @dalestewart10 ай бұрын

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

  • @user-vv3mn5zj2h
    @user-vv3mn5zj2h5 ай бұрын

    Very good explaining thanks so much for this

  • @hyper_channel
    @hyper_channel5 ай бұрын

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

  • @fatihcan5890
    @fatihcan58908 ай бұрын

    Best tutor evaa bro thanks a lot !!

  • @souravmehta5143
    @souravmehta514310 ай бұрын

    Oh bro! Was just waiting n finding this

  • @blazi_0
    @blazi_09 ай бұрын

    Very very well done tutorial love it ❤

  • @h_maina
    @h_maina9 ай бұрын

    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.

  • @chineducornelius6076
    @chineducornelius607610 ай бұрын

    Nice one Sonny, thanks 👍

  • @developerpranav
    @developerpranav10 ай бұрын

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

  • @sudeshryan8707

    @sudeshryan8707

    10 ай бұрын

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

  • @DigitalAlchemyst

    @DigitalAlchemyst

    8 ай бұрын

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

  • @vikasni95
    @vikasni957 ай бұрын

    Thank you for this wonderful content 😊

  • @dimasmusa221
    @dimasmusa2218 ай бұрын

    thanks for the tutor man, this is cool

  • @tomspatula616
    @tomspatula6162 ай бұрын

    Great video !! thanks a lot

  • @dainsleif3122
    @dainsleif31227 ай бұрын

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

  • @CodingWithTaaxo
    @CodingWithTaaxo9 ай бұрын

    I'm really glad I watched this video

  • @EK-rp8jp
    @EK-rp8jp8 ай бұрын

    Omg best server action tutorial 🎉

  • @umargulzar2982
    @umargulzar298210 ай бұрын

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

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

    Neat explanation!

  • @programmingwithnit5308
    @programmingwithnit53089 ай бұрын

    Thank you brother

  • @user-xz8bp5eb4d
    @user-xz8bp5eb4d3 ай бұрын

    You save me lots of time

  • @deddyprianto3979
    @deddyprianto397910 ай бұрын

    you are hero Sony thankyou ❤

  • @madhumitamiddya702
    @madhumitamiddya70210 ай бұрын

    Sonny keeps his promises all the time

  • @sicario55
    @sicario5510 ай бұрын

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

  • @SonnySangha

    @SonnySangha

    10 ай бұрын

    Thank you!

  • @beastnighttv
    @beastnighttv10 ай бұрын

    amazing stuff!

  • @ahmedabdelgawad2684
    @ahmedabdelgawad26849 ай бұрын

    Good vid, Thanks

  • @sumitpaul3263
    @sumitpaul326310 ай бұрын

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

  • @nicocouss7849
    @nicocouss78499 ай бұрын

    Top thx a lot!

  • @failasuf950
    @failasuf95010 ай бұрын

    totally liked it. make video how to delate data plz

  • @fear0ne
    @fear0ne9 ай бұрын

    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?

  • @alexg7282
    @alexg72827 ай бұрын

    Thx !

  • @Nicolas0325
    @Nicolas032510 ай бұрын

    Thx sonny!

  • @Tkamsker
    @Tkamsker10 ай бұрын

    You are a great teacher thank you

  • @SonnySangha

    @SonnySangha

    10 ай бұрын

    Thank you! 😃 #PAPAFAM

  • @ConorChepenik
    @ConorChepenik9 ай бұрын

    Great video

  • @CoderSineNomine
    @CoderSineNomine10 ай бұрын

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

  • @kyle-andrewgovinder9902
    @kyle-andrewgovinder99026 ай бұрын

    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

  • @leofaizan8886
    @leofaizan888611 күн бұрын

    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

  • @alexandremezeray1502
    @alexandremezeray15027 ай бұрын

    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?

  • @jeffmlb256
    @jeffmlb25610 ай бұрын

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

  • @SonnySangha

    @SonnySangha

    10 ай бұрын

    ❤️💯

  • @___ruthless
    @___ruthless7 ай бұрын

    Sonny you are a g mate

  • @nimanjagligovic2339
    @nimanjagligovic233910 ай бұрын

    Wooo let's GO ❤

  • @JohnnySalami-jo4jh
    @JohnnySalami-jo4jh8 ай бұрын

    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?

  • @crim-son
    @crim-son9 ай бұрын

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

  • @tauqeerhusain7521
    @tauqeerhusain752110 ай бұрын

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

  • @appstuff6565
    @appstuff65657 ай бұрын

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

  • @elmirshidev
    @elmirshidev10 ай бұрын

    Nice❤

  • @sharjilkhan7933
    @sharjilkhan793310 ай бұрын

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

  • @masterv2.045
    @masterv2.0458 ай бұрын

    you fucking rock master keep it up

  • @mohammadmoaid5282
    @mohammadmoaid52828 ай бұрын

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

  • @piyushkapoor5195
    @piyushkapoor51956 ай бұрын

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

  • @learnearn8721
    @learnearn872110 ай бұрын

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

  • @noeldolan518
    @noeldolan5185 ай бұрын

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

  • @ajaysh73
    @ajaysh738 ай бұрын

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

  • @oliver1231033
    @oliver123103310 ай бұрын

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

  • @SonnySangha

    @SonnySangha

    10 ай бұрын

    Awesome Il create a vid on it🔥

  • @davidkilamlya7630
    @davidkilamlya76308 ай бұрын

    Hello Sonny, can you prepare the NextJs 13.4 full course

  • @amitsaini000
    @amitsaini00010 ай бұрын

    awesome

  • @mikail_dev
    @mikail_dev18 күн бұрын

    We would love a tutorial on useOptimistic hook.

  • @friendofyou743
    @friendofyou74310 ай бұрын

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

  • @agvaandanzanjargalsaikhan4820
    @agvaandanzanjargalsaikhan482010 ай бұрын

    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

  • @didheemose
    @didheemose9 ай бұрын

    This video make to me to subscribe your channel ❤

  • @MaKTaiL
    @MaKTaiL9 ай бұрын

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

  • @sharurocky8379
    @sharurocky837910 ай бұрын

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

  • @datamagaldadze1134
    @datamagaldadze113410 ай бұрын

    can you make videos about dynamic routes? api routes?

  • @parkerrex
    @parkerrex10 ай бұрын

    bro perfect timing :-)

  • @SonnySangha

    @SonnySangha

    10 ай бұрын

    Haha I do try!! 🙏🏽

  • @maroofali9679
    @maroofali96798 ай бұрын

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

  • @lakshaymanchanda2322
    @lakshaymanchanda2322Ай бұрын

    crazy!

  • @appstuff6565
    @appstuff65657 ай бұрын

    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

    @appstuff6565

    7 ай бұрын

    @22:59

  • @alsherifkhalaf7385
    @alsherifkhalaf738510 ай бұрын

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

  • @aguud
    @aguud4 ай бұрын

    nice video

  • @guled669
    @guled66910 ай бұрын

    How do you clear the input, how to handle validations

  • @Techcabz-wh6he
    @Techcabz-wh6he10 ай бұрын

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

  • @peterabiodunokusolubo1541
    @peterabiodunokusolubo154126 күн бұрын

    Hey Sonny, what is the repo name of the above tutorial.

  • @BrandonFunk
    @BrandonFunk8 ай бұрын

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

  • @NeoCoding
    @NeoCoding6 ай бұрын

    that's important things you teach ths

  • @ayushshende4290
    @ayushshende42909 ай бұрын

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

  • @jhazzpher17
    @jhazzpher176 ай бұрын

    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?

  • @latch909
    @latch90910 ай бұрын

    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

  • @weichen3994
    @weichen39946 ай бұрын

    In what sernario does progressvie enhancement actually be needed? Don't really understand this part.

  • @prafullb4652
    @prafullb46523 ай бұрын

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

  • @marcogomesrd
    @marcogomesrd10 ай бұрын

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

  • @dainsleif3122
    @dainsleif31227 ай бұрын

    Next.js got even faster.. 13.5.2 ❤