Mutate data using Server Actions in NextJs 13.4

[@kyle-andrewgovinder9902]

What I love the most about Hamed's videos is that he covers literally every detail no matter how small it seems. He apologized for self-promotion but there was no need to apologize because it just shows how much of content this man has already created for us on Nextjs and was just pointing us in the right direction in case we needed more info on the topics he was discussing.

[@hamedbahram]

Thanks Kyle! I appreciate that.

[@Shawn-Mosher]

Very cool!!! Gets better and better. Good job showing us these new updates

[@hamedbahram]

Anytime Shawn!

[@rebazjabar7660]

so excite to see you're working with up-to-date topic. we appreciate you

[@hamedbahram]

Thanks Rebaz. Glad you found it helpful.

[@BuiltWithLLMs]

Only person doing MongoDB + Next 13 right now, thanks!

[@BuiltWithLLMs]

State management in next 13 would also be interesting

[@hamedbahram]

That's right David, you won't see mongo that often these days.

[@hamedbahram]

Agreed. That's an interesting topic to cover next. Thanks for the feedback.

[@arman4887]

I feel blessed to have found this channel. Great video on up-to-date Nextjs topics with MongoDB

[@hamedbahram]

Happy to have you here Arman. I'm glad you found the content helpful.

[@Billiam112]

Great stuff, looking forward watching the whole thing :)

[@hamedbahram]

Thanks for tuning in Bill!

[@abibinyun]

thx for detail information, absolutely amazing, i like how you description detail feature from next js,

[@hamedbahram]

Your welcome! Thanks for tuning in :)

[@noahginsburg6140]

Awesome video. Love that you’re taking the time to keep up with the current fire hose of nextjs updates. Here’s my question, in your lib folder where you define the mongodb methods couldn’t you have a method that makes the db connection and makes your db mutation similar to how you directly go to mongo to GET the todos? What are the direct benefits of the actions? Also, would you typically turn those GET methods into an api? I’ve always just made apis for data access without considering just making a method and going right to the db. Thanks for the great content!

[@hamedbahram]

Thanks Noah for leaving your feedback. Making APIs to access your database was the way. But with the new server actions, you don't really need that extra layer, you can define functions that run on the server and just call them from the client.

[@LifeWithRilla]

@@hamedbahram So if I'm understanding correctly the server actions just remove the API layer?

[@hamedbahram]

@@LifeWithRilla I think it's fair to say that.

[@Billiam112]

If I may suggest for a future video; I would be super interested in a nextjs + strapi video.👌

[@hamedbahram]

You got it!

[@mobpsycho6600]

It was worth to watch this video

[@hamedbahram]

Thanks for tuning in!

[@eloualielouali4949]

top notch video, i was wandering if u want to add a delete button next to every todo how would u handel the action

[@hamedbahram]

That'll be the same, you can have a button with 'fromAction' prop on it point to a 'deleteTodo' action, or a form the same way with an 'action' prop

[@eloualielouali4949]

@@hamedbahram thank u so much for ur time

[@hamedbahram]

@@eloualielouali4949 my pleasure

[@lulungsatrioprayuda9931]

I'm so excited to follow you tutorial sir, did you have any tutorial that create simple auth with jwt token? thank you

[@hamedbahram]

Thanks Lulung. I use `next-auth` for authentication. It's pretty simple and straight forward. You can watch it here: kzbin.info/www/bejne/e5mWdqOtprlnma8

[@hfzkq]

Awesome ❤Go ahead

[@hamedbahram]

Thanks! Let's go!

[@alirezadnia]

Perfect. Thank you Hamed

[@hamedbahram]

My pleasure buddy! Thanks for tuning in.

[@ofermalbin]

Thanks for the video! Could you give an example of a field of type file? How do I extract the name of the file and its contents in action?

[@hamedbahram]

Good question Ofer. I'll definitely cover that in a future video. Thanks for tuning in.

[@juanferrer5885]

Awesome video!! Could you talk about internationalization in nextjs AppRouter?

[@hamedbahram]

Thanks Juan. Sure, that'll be an interesting topic. Will keep that in mind.

[@GregPeters1]

Thanks for the heads up!

[@hamedbahram]

Anytime! Thanks for tuning in Greg.

[@AnthonySmith-tw2ll]

Great content, thank you! I can't seem to get server actions to work on pages generated with generateStaticParams... any idea why? I'm getting 405 method not allowed but the same component submits data fine on other pages.

[@hamedbahram]

You're welcome Anthony, thanks for tuning in. I'll test that out. In the mean time, can you do the following and let me know, I'm assuming this is a server-rendered page, can you comment the `generateStaticParams` function out and then try on that same page? Also, do you have a `route.js` file defined at that segment?

[@AnthonySmith-tw2ll]

@@hamedbahram Thanks for the quick reply, Hamed. If I comment out the function then it does work - so it does appear to be a conflict there but not sure how to fix currently. The structure is reviews(folder) -> [slug](folder) -> page.tsx (file containing generateStaticParams)

[@AnthonySmith-tw2ll]

@@hamedbahram I've used notfound from next/navigation instead of fetching the static paths up front. I think that fetching the static paths means that you can't use a server action on that page. I get the same result and am able to use server actions now so I think this is the method to use going forward.

[@hamedbahram]

I see. I'd have to test this out myself.

[@oluwafemifaleye6845]

Thank you for this interesting video. Please, how can I handle file upload using the server component?

[@hamedbahram]

Thanks Oluwafemi! I'll be covering that in a future video soon.

[@rajenderkatkuri7642]

What font do you use in VS Code?

[@hamedbahram]

Operator mono!

[@alvinacosta2312]

how to redirect to a different page after a todo is created sir? previously we had to use useRouter. how to do it in a server component after the server actions is done. thanks!

[@hamedbahram]

You can call `redirect` from `next/navigation` in your server action function.

[@ARUNRAWAT-rh5ks]

could a make a video on how cna we update the session info after user logged in ?

[@hamedbahram]

Thanks for the feedback. I'll have that in mind for a future video. In the mean time you can read more about the new `update` function from the next-auth package: next-auth.js.org/getting-started/client#updating-the-session

[@ИванАрабаджийски]

How are you supposed to handle loading state and errors using this server actions? What if I double click the button while the first call is still being awaited?

[@hamedbahram]

Good question! you can use the `useTransition` hook or the `experimental_useFormStatus` from react to get a pending state while executing the server action. For error handling you can watch this video where I use zod to validate the inputs => kzbin.info/www/bejne/qZWud3ila55qbrc

[@soundnimation]

Cool video)) I am looking for a method to save the state of the page after reloading, can you recommend something, please? I want to avoid storage or cookies, what I am looking for is something that was in a react-router page state. Thank you in advance. For example, menu is open and after reloading it is closed, or the pagination state or filter state

[@hamedbahram]

Different ways you can do it, for example you can use the URL for some state, things like filter and pagination can be persisted in the URL, for UI state you can use the React context.

[@DioArsya]

is using actions function like that doesn’t expose the important credentials on the server side?

[@hamedbahram]

That's a good question! server actions are only running on the server, but it's important to understand how to use them correctly. Also keep in mind that this is still in alpha release and not production ready in any shape or form, so we'll most likely see changes in the future.

[@eliuddyn]

Great 🔥🔥

[@hamedbahram]

Thanks for tuning in.

[@AbdallahMoubarak]

Hello Hamed, How can we add mongoose to this and use the models?

[@hamedbahram]

Hello Abdallah, it would be very similar to what I'm doing in this video, you can define your models and expose your database access objects (functions) like I did in the `lib/mongo/todos.js` file. However, I don't recommend using mongoose, if you're looking to use an ORM, use Prisma, which gives you type-safety as well. I have a video coming out tomorrow, where I demonstrate this.

[@AbdallahMoubarak]

@@hamedbahram thank you bro..

[@hamedbahram]

@@AbdallahMoubarak My pleasure.

[@damiantriebl1747]

and for use Redux with client and server component (in the same store) is posible?

[@hamedbahram]

I'm not sure how you would fit Redux into this architecture. I would use native Javascript patterns like modules to share data and logic between server components and React context for client components.

[@KendaBeatMaker]

@@hamedbahram hey guys did a little experiment and was able to get recoil working by creating a component that takes children and wrap them with recoilroot. Then wrap the root layout with this created component (recoilroot)

[@hamedbahram]

@Ken Taylor Cool! Share your solution if you don't mind.

[@Fantasia1013]

what means "mutate data" ?

[@hamedbahram]

It means Changing or updating your data

[@Fantasia1013]

@@hamedbahram ty so much

[@hamedbahram]

@@Fantasia1013 Anytime!

[@techcoevolve]

Cool shirt buddy :)

[@hamedbahram]

Thanks 🙏🏽

[@moinkhanpathan541]

can we update data using server action?

[@hamedbahram]

Absolutely! server mutation is exactly updating data using server actions.

[@0xtz_]

Woooow

[@hamedbahram]

My pleasure 😀

[@leopolddelassence5224]

very cool, but video is slightly too long

[@hamedbahram]

Thanks for your feedback. I'll try to make future videos more concise.

[@misterkilluminati6949]

Thanks for the amazing and straight forward contents :) Quick questions though. Do we have to make a route segment, which has a form that has a server action on it, dynamic(AKA SSR) ?

[@hamedbahram]

Thanks! glad you find the content useful. Good question! no you don't have to make it dynamic, in fact unless you're using a dynamic function like `headers`, `cookies`, etc. it will be static by default.

[@misterkilluminati6949]

@@hamedbahram I was actually remaking the project you did on your video about how SSR, SSG and ISR are different from each other, and changing your Form component to use server actions instead of onSubmit. The problem is, if I use a server action on the form component, all the three SSG, SSR and ISR pages which use that Form component, will turn SSR when I build the project. I was hoping you could give a hint of what's going on. There's nothing on the docs about this

[@hamedbahram]

Hmm 🤔, Interesting! cool idea to combine server actions with the whole dynamic vs static rendering and see the result. I'd have to test that out

[@misterkilluminati6949]

@@hamedbahram I would love to see a video on it from you in the future :) Thankss

[@hamedbahram]

@@misterkilluminati6949 Absolutely