How To Use Next.js 14 Server Actions

Next.js 14 has now made server actions production ready.
In this video, I go over how you can implement server actions into your project so you don't have to manually create API endpoints.
Server actions allow for server mutations right inside of your components.
Server Actions can be defined in Server Components or called from Client Components. Defining the action in a Server Component allows the form to function without JavaScript, providing progressive enhancement.
Join my FREE Discord to talk and network about web development! 👇
/ discord
TimeStamps
0:00 Intro
1:18 The Old Way of Server Mutations
4:07 Server Actions in Server Components
7:25 Revalidate Path
9:17 Client Component Server Actions
15:53 Reset the form
17:30 Loading State (useFormStatus Hook)
20:43 Outro

[@3J2A3Y]

As a beginner, I can say that reading the Nextjs docs is overwhelming but when they get explained - like you did. It makes perfect sense.

[@brettwestwooddeveloper]

Thank you so much! I tried my best to explain it

[@enz1222]

Never seen a better explanation than this 💯

[@belgi76]

Perfect explanation about the server actions.

[@brettwestwooddeveloper]

Thank you!

[@merakli2022]

Well done. Keep up the good work!

[@brettwestwooddeveloper]

Thanks, will do!

[@muneeburrehman547]

very useful and explained in super easy way. Much appreciated!

[@fahdfady6632]

Amazing, it all makes sense now.

[@brettwestwooddeveloper]

Awesome! Glad I could help you out!

[@NOTHING-en2ue]

now i really understand the server-actions, very well tutorial thanks a lot ❤

[@brettwestwooddeveloper]

No problem! Thank you for watching!

[@prashlovessamosa]

Thanks for sharing Brett.

[@brettwestwooddeveloper]

You are welcome!

[@dev-akeel]

Sharing is caring. But when I shared something with Brett. Bro got angry at me and is not talking to me now😢

[@satvik0099]

Your explanations are always awesome. Just waiting for some full-stack videos from you 😁

[@brettwestwooddeveloper]

Glad you like them! Should be coming soon

[@creciendotech]

This is the best explanation I have watched so far, you have earned a new subscriber. Thanks!

[@brettwestwooddeveloper]

Awesome! Thank you! Glad I could help you out!

[@dawid_dahl]

Great explanation. Thank you!

[@brettwestwooddeveloper]

Glad it was helpful! No problem!

[@skverskk]

Wow. You explained it all. Thx

[@brettwestwooddeveloper]

No problem! Thanks for watching my content!

[@HeroKiller-rh6vx]

Great video thanks man!

[@brettwestwooddeveloper]

Thank you!

[@jpisty]

Thank you so much. Been struggling with the App router

[@brettwestwooddeveloper]

No problem! Glad I was able to help you out!

[@lukyno5751]

Really good video!!! Thx

[@brettwestwooddeveloper]

Thank you and no problem!

[@meilyn22]

Best explanation hands down!

[@brettwestwooddeveloper]

Thank you so much!

[@dev-akeel]

I have no experience explaining anything 😢 so I lost my friend while explaining him something really very important.

[@aburaihan-py4vi]

Excellent!!!!!!!!!

[@ekchills6948]

You always know what we need

[@brettwestwooddeveloper]

Glad I could read your mind

[@dev-akeel]

I found my friend the best in the word and while sharing the best thing with him he stopped talking to me and now😢

[@user-ty3iu3zv3d]

Appreciated. 0:14

[@user-mq2qb6ry1f]

Good Video Awesome Explanation

[@brettwestwooddeveloper]

Thank you!

[@user-zn3fg1eg4m]

Hi this tutorial is really explanatory and can be understand well than other video on the same topic. There is a miner suggestion i want to add that it will be more beneficial to have a get or fetch data actions too.

[@ashimov1970]

God bless, Brett

[@brettwestwooddeveloper]

Thank you!

[@ChrisHaupt]

prisMA!! thanks for the video

[@brettwestwooddeveloper]

No problem!

[@usmanshahid1557]

Good work

[@brettwestwooddeveloper]

Thank you

[@techlightdev]

Thank you

[@PeriklesPeriklesoglu]

thank you

[@aguud]

nice video

[@SteelCityEndurance]

Hi, this is pretty straightforward but in the end your writing a function that accesses the database. If you write an API, you can reuse the endpoint as needed. aside from not exposing the POST to the client side how does this benefit the developer ? You're writing the function either way, right?

[@whezboo]

Hi there! Firstly, thank you so much for the informative video on server actions. I've learned a lot from it! I just noticed in the code on page.tsx, there's an unused addExpense function. Since we've already separated the form into its own component and created a dedicated action for server interactions, it seems like this function isn't necessary anymore. Perhaps we could consider removing or commenting out this function to avoid confusion and keep our codebase clean. Just a suggestion to streamline things further! Thanks again for the awesome tutorial! Looking forward to more content from you. 😊

[@brettwestwooddeveloper]

No problem! Thanks for the support and appreciate the feedback!

[@YuuffyLIVE]

Hey Brett, awesome Video. How do we go about using server actions for calling external APIs where we have to authenticate ourself with headers (using clientid,secret). Do we just use fetch or can we use external libraries like axios inside server actions? In a lot of explanations we use forms and call our own database using ORMs like prisma, but never external apis. Another thing (more directed towards server components) is that it is often very confusing switching from one to another and use them simultaneously, when you can only use states inside client components or async/await inside server components.

[@BobbyCatesby]

What setting or extension do you have enabled to see the vertical ruler on the side, showing opening and closing of divs?

[@kenscode]

Great video! I am having trouble finding a resource on how to redirect the user to another page after submitting to the database inside a server action. My code is similar to yours but I have a form with a lot of fields. redirect() says it works but isn't working inside a try/catch block and outside of the block says it's unreachable code 😬

[@nicolascondrea8068]

Great vid, thank you!

[@brettwestwooddeveloper]

You are welcome!

[@user-im2vm1uz4h]

Thanks for this great tutorial. I have a question. Can't we fetch data by using server actions without forms like we do GET request using api route?

[@brettwestwooddeveloper]

Thanks for watching! And I think you can only user server actions on forms for data mutations. If you want to perform a GET request then you should just use a route handler.

[@Wortkotze1512]

is there a link to a github repo :) sometimes this helps to see the whole example at the end?

[@heddshot87]

You don't have to place the cursor on the far right to make a new line, just hold ctrl and enter, you can be anywhere on the line. Same goes for new line above with ctrl+shift+enter. 😊

[@brettwestwooddeveloper]

Thank you for the tip, will definitely have to get use to it

[@rockbotico]

Thanks for sharing!. I have a question. Why does the title text flash when you add the school supplies? Edit: I found the answer in a github discussion, "I just noticed that the jitter is only there in dev mode. After building the project, it's gone."

[@brettwestwooddeveloper]

No problem! Thanks for the sub!

[@ayushshende4290]

How can we use server actions client side but outside of form tags, let's say I don't have any input form like calling a server action on click of a add to cart button, and also how to show loading state in that.

[@brettwestwooddeveloper]

I recommend using API routes instead of server functions for that and only way to show loading state is with client side code. You will have to refactor code to suit your case

[@cloudagnostic]

On the form component, could i just import useState instead of useRef to reset the fields? I’m not that familiar with useRef. Great video by the way

[@brettwestwooddeveloper]

Thank you! And yes you can use useState hook as well to reset the form.

[@dev-akeel]

Yes, absolutely useState can be used. But it is better to use useRef for better performance, refer to re-rendering in react useState.

[@whatdorin]

What extension do I need to use for function autocomplete suggestion like you have here? 2:58

[@brettwestwooddeveloper]

Github Copilot. It does cost a monthly fee of like $10/mo

[@leonardogranetto7646]

I haven't found anything about this in the docs, but can you actually access the request object?

[@brettwestwooddeveloper]

Very nice. Good to know

[@sagesofsound298]

I wish there was a way to sort of see the cache working in action. Like with react query. Right now we just sort of assume everything works and is safe.

[@brettwestwooddeveloper]

Yea that would be pretty cool but I guess you can test it out by adding new data and make sure you are fetching data by caching and see if the data updates or not

[@darioalves7739]

When you add the expense, looks like the page is refreshing, right? that's not good.

[@protonys]

Hello, how will realize form validation?

[@brettwestwooddeveloper]

Use zod or something similar

[@marroos5440]

Hi, i am self-taught and I've started learning Next.js 13 2-3 months ago, i have learned how to create simple full-stack app, where app communicates to DB via prisma ORM in/api folder's routes. I liked that way, allowed me to separate backend codes from frontend, but now i see Next.js 14 and Server Actions on every corner. What does that mean for me? Should i stop using /api folder way, and start using server actions, or can i still use /api folder way? Thinking of server actions as newer way, as a part of latest version of Next.js, server actions are probably recommended way. It is a big change for me, who did not learn Next.js completely, yet i need to change big part of how i managed db stuff in my app. Thanks to Your video i am starting to understand server actions, thank you. :}

[@brettwestwooddeveloper]

I would still stick with API folder routes. It is better overall in my opinion anyways.

[@crim-son]

My main issue with this is that, i can't know if the server action succeeds or fails, what if the user doesn't have a good network?...i have to use a form everytime I want to use server actions, what if i want it on a click of a button?, id rather just stick to creating APIs and making client side requests

[@brettwestwooddeveloper]

I agree with you, I still mainly use API endpoints and only really user server actions on contact forms at the moment. However, things could always change.

[@crim-son]

I hope Nextjs team sees the struggle with the use of server actions and come up with brighter ideas, its really beautiful not to have to create and API endpoint for every action, but it also comes with consequences@@brettwestwooddeveloper

[@muradqumizakis8428]

why do you call it prism when your clearly writing prismA (love the video learned alot)

[@brettwestwooddeveloper]

hahaha speech impediment

[@Vickysingh027]

That will show error "only plain objects can be passed to the client component"

[@hulashmahto99]

Revalidate tag how to use

[@brettwestwooddeveloper]

I talk about how to use the Revalidate tag at 7:26 mark

[@hulashmahto99]

@@brettwestwooddeveloper revalidate tag not revalidatepath

[@axolotic6981]

Maybe it's easier, but you send more code and other things to the client = more code = more traffic + more insecure

[@commashalfstrokes7575]

github link please

[@brettwestwooddeveloper]

sorry don't have for this. It's more of a tutorial

[@commashalfstrokes7575]

@@brettwestwooddeveloper and it would be really helpful if you do tutorial on a large scale project (like may be a million of users ).. like how should we proceed about it. what will be the best practices when we use next 14. how will be the folders structure architecture.. like a boilerplate kinda thing.. I guess nany of us get understanding in small scale app. but get stuck in architecture wise while going for building large-scale application.

[@viniciusrangel544]

i still dont like this idea, just refetch everything, you can have some weird behaviors.. lets say that i have a "big" system where 2 users or more can add the data at the same time, the refetch will bring the new items which i didnt create. the optimistic way where you can just push to your state its better

[@therealdevopsintern]

Too much over engineering just to use server actions. I don't think I will be using it. Please viewers don't swallow any new release that comes up, just take a little taste of it and throw it out.

[@berniko4954]

True, I prefer standart front to back communications with API, mutating data

[@dawid_dahl]

One can really tell you don’t have a clue what you are talking about.

[@brettwestwooddeveloper]

I partially agree with you but yea I think overall I will be sticking with API folder routes.

[@therealdevopsintern]

@@dawid_dahl your statement tells you don't know what is happening in the developer community. Server actions is fucked when you are using the same API for mobile app development.

[@dawid_dahl]

@@therealdevopsintern Why don’t you provide some arguments instead of just swearing and acting like an idiot?