How To Use Next.js 14 Server Actions

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

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

[JAY]

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.

[enz]

Never seen a better explanation than this 💯

[muneeburrehman]

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

[creciendotech]

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

[znfgegm]

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.

[satvik]

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

[belgi]

Perfect explanation about the server actions.

[NOTHING-enue]

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

[jpisty]

Thank you so much. Been struggling with the App router

[BobbyCatesby]

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

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

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

[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 😬

[darioalves]

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

[Wortkotze]

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

[ayushshende]

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.

[heddshot]

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

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

[imvmuzh]

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?