Next.js 14 Server Actions GET, POST, DELETE, Error Handling, Notification, Loader | Complete Guide

Hello friends welcome back to the channel uh in this video we are diving head first into the Fantastic world of Nexis 14 and it's a gamechanging server action feature hold up re a bit in the previous Nexus 13 the server action was a bit like a wild roller coaster it was cool but not not totally stable but in Nexus 14 it's now a Rock Solid part of the game ready for action in both your local setup and the production environment now I know what you are thinking server action is it the cool kit on the block or just some outdated PSP style drama well here is the scope some deps are waving the old school flag calling it PSP Vibes while the guru I mean while the experts some experts some other mens in the field are are giving it a standing Aion why because it's all about writing less and aching more so what's the agenda today right we are going to throw on our coding superhero caps and compare the classic style with the shiny new server action and guess what I have got some ninja tricks to show you how to implement the server action like creating and deleting post sending notification showing a loading loading status handling errors and uh showing a confirmation window before dele so my friends time is precious we are not here to watch let's jump straight into the Cod and explore the owner of Nexus 14 star production together stay tuned it's going to be EP this is chandan a full we developer signing off until the code adventur is begin dear friends let's set up the Border flet first in the meantime let's go to visit the shatu library we will same time install the Satan U library so here is the Shan next this and here is the installation okay so I'm copying this let's move over there so here I will create a folder call see to organize all of my codes uh in a a specific separate folder so yeah we will use the typ script is the default slate here uh where is the global CSS so the global CSS inside the F folder you can see so I'll select the global CES over there yes will keep as it is they they asking where is the taen config.js file so our tellin config it has a typ script file so we'll change the CH to TS now they're asking me the configure where is the component folder will be located so I will change the component folder inser the SRC so I'll write the SRC over there SRC then components okay also the library will be insert the SRC but this is not mandatory uh you can um install the components you can or UTI file folders I mean whatever you want so nothing uh issue but from mind I think the the organized way will be better like the all folder all files if the organized then it it is easy to find easy to work with Okay so our sh Library setup is completed now let's move to again sh Library website here we'll found the input and the button so here is the installation process I'm copying this and we will move over there paste it here need the input and also we must need the button because these two items we are going to add inside our project okay so the our ballet plate is almost ready now we'll create a EnV file over there and here we will write our database and environment St here you can see uh so I write our note environment is development and the mongodb URI this is we have already have a database let me show you here is our database next this new and we have a uh table is called users so let's dive into the code our B plate is ready okay yeah everything is perfect now let's go over there Local Host 3,000 so you can see our next J is ready so we will now need the pages data the exist data I will remove from there everything whatever there there you can see everything will be removed yeah so perfect this is our layout okay so how should I do I will not going to use this 200 and we'll create a box layout over there 5 Excel and we'll the padding five and we'll apply over there ping five if I refresh the pace and uh minum height we will not use the 100 Bas we will use the 100 dvas we'll discuss about the dvas Sy later and DVS means the dynamic view height that means uh this Dynamic view height when a user visit your site from the desktop mobile or the tab this Dynamic view VI height will adjust all of the individual devices so DVS uses per good good use for the responsive purposes so here you can see we have designed a box layout let's move over the pace so very first we will create a form and uh apply the server action to submit the form data to post into the database here inser the component I have created a folder ins the user folder we will create a file it's called new user form DSX okay and okay find so here I'll design form over there and insert the form should be two input input type email and here should be a bottom so if I refresh over there I see sorry I have import this now you can see that name you like it perfect so okay so let me Flex call yeah so that should be fine and inser the form here we can do like border ping five and we can apply a shadow and up play a BG all right okay fine okay so it's looking great okay so for now what we can [Music] do okay so our sub down now we can write a level here level for and your [Music] name your name and this is sure email okay yes fine and uh submit ID we can write [Music] requir here we can write the reord over there okay submit perfect so our form creation is completed perfectly now uh since uh we are going to use the mongod DV so we have to install the mongos and same time we have to create a model uh for the user okay so let's install the mongos our project sorry yeah add mongus and uh same time inser the SRC folder let me create a create a mod folder called models models and uh I have already have created the models for you so I don't was I don't want to waste more time to create models so here is my user model okay so you can see everything over there uh just uh implement the name and the email and for the DV connection we will get another folder called DV connection okay inside the DV connection uh or DV connect we will create another file this file to connect between the database and our app so this tutorial is not for to learn current between the and uh and uh app so if you're new here if you want to learn how you can connect between the mongod DB and the application so you can learn from my another video I'll leave the link inside the description but you know my friend you can not only use the mongodb you can use the SQL you can use the Prisma you can use the redish I whatever you want you can use any kind of database inside your server action so in the SRC folder I will create another folder called actions all of our server actions will store on this folder so let's create a ACS called users this user okays for the server action we have to assign we have to write use server so keep in mind so use server action we must have to asend the server use server very very top on the file so here very first uh this is sing function Must Be This Is Sing function and I will all right DV connect very first we'll connect the database and we'll the receive the data as a form R form R and insert the file how we will how we will receive let me go to the form here you can see action insert the action we'll call the function we just Define the create new user okay yeah so we will import this create new user perfect perfect here is the users okay so let me console the form then you will see what is happening over there you're diff uh let me reload the pace now if I submit the button like names and this here you see this is the magic this is the magic if I share my on of code there is this is the another project I have designed for you this is next tutorial if you want you can check this video from my other playlist here if I move over the reg here you can see register pce so if I go to the register pce okay you can see to register a user what I have done very first this is common I have to create this form okay for the register and after that we have created a enter route see this is the route we have created to register a pace in my another project check there is a lots of data lots of code I right especially we have to define the another API to register a user but in Nexus 14 in server action we don't need to Define API because if I go over the console you can see Nexes by default they create a API for us okay so if I go to network Tab and if I hit the submit button everything like great user look over there submit here you can see next j4 server action already by default created a API for us we don't need to create a separate API separate validation or separate security issues you can see see the P here is the data we have sent okay so this is how we can write L scod and achieve more I think this is one of the great thing of the sub action function even this is secure you know you can you can concern this is not secure but no no no this is secure This is highly secure and this mechanism this uh Ninja technique buy from Nexus 14 so our very very first comparison if I compare between our old style or the traditional style to write API create additional uh separate API to submit or post information so this is the first comparison in first comparison I think the server action is win it's because we have write less code but achieve more we don't need to write a long code now we have to store the data inside our in database so to store data in our database we have received the data you can see action okay the name the value everything we have found so now let's assign it constant data okay and name we will write the form data. gate name yeah same over there form create email user and I which new this should be user we have created the user already model right yeah user and uh here we'll write the data because we just receed the data and we also save this save fine now if I console this now if I console this let me check the console what is happening okay let's submit this if I go to the console over there yeah you can see the data was created in database so to make sure we can move our mongod DB over there you can see refresh this is the database okay data we have found Also let's move another time try another time get user two get user two and submit here you can see data was over there let's move to the database mongod DV refresh do over there so that means in the first comparison the next JS server action was win so now next challenge is this let's F the data we just want to show the data over there the wh user list all of the user list we have found okay we'll show the user list over there let's move to the pce yeah we will create another separate function uh sorry we'll create another separate component to show users let's create user now the question you can ask me without API how I can or how we can uh F the data from the database yeah so we'll same way we'll apply the server action to F that data from database so very first let's uh move to the our action file there is the users and this is the create user we will copy same thing or or better we create another function show users and this should be a sync function okay now we just have to fix the data from there from our there yeah we will apply the Trias same now also we have to assign the DB connect DV connect so let me check the show user if I call the show user over there uh is a list okay so before using AIT we have to call the as sync over there okay so if I console over there you see we have found the user list this is the magic okay so we don't need to create a API Let's uh print the user list over there okay so now uh before printing the users uh we can assign a interface a global interface for the users so inside the SRC we can create a we can create a folder called interface and inser inside the interface uh we will call index. D.S here we will assign the Glo Global interface that means we can use any kind of interface from there from to inside the entro project okay now so we'll declare here and declare the [Music] global this should be interface interface is I user so declare [Music] Global ID is a string name String and we found the email is string this is our Global interface so I use it and let's move again again to the user list here we will print the users and same time if users uh not equal equal undefined then map the users okay then map the users if is not on different then map the users and and it should be user uh I user and uh index number perfect and now we will print over there okay SDF I save it that's fine now you can call div and this ke should be index okay and over there we can write the user that name okay so here you can see we have found the two user one is create user and is create user two so how we have implemented this let me uh share by art so here is a diagram how we implemented this you can see in our old style I mean the traditional style if I count this is a form to submit to create a new user we have to call the API and to show user as a inside a table we have to call a separate API but for now we can see we we done everything we have created the form we have connected with the actions we have show uh that users we have connected with the action that means we reduce the code a simple way we reduce the Cod and uh also this this is not the end inside the action we can write more code like uh we have already did the post we have write the gate and later we will do the delete I mean we can do anything whatever we want okay but we don't need the separate separate API route so let's move over there and we will find everything is perfect yeah so to show users uh here we have created this so I think this is not a good practice we design a separate component to individual user that will be a great so let's create another file called single user. TSX and R C okay we will import over there single user and okay fine okay this is perfect now R see okay perfect perfect yeah we'll as a index and also we'll pass the user as a user now we have to cast this user inside the single user to cast this uh insert the single user component we have to write over there and is user but there should be error of typescript error we have to declare over there here is uh yeah interface I props and this call user I user okay and we'll implement this out there I think the is gone okay perfect now we have to print there you can print there like user okay so I can call iser and sorry name and same way we can write email okay and also same way we can design a button over there button okay delete user okay here we can define a class name and GRE we can spend like four four right four and we can the capitalize same way we can copy over there and paste also paste this is the four this is should like uh 5 six and this is two or this okay three let's three fine if I save it you can see this is Bey okay now we can do a we can apply border and I'll say padding yeah so here you can see see everything is perfect okay yeah so submit delete now let's create another user if I click on submit you can see user is created perfectly okay but the user is not available over there so if I refresh the pce I can can see the user word there so how can I fix the issue how can I auto reload I mean uh the auto face the data okay so there is a nice function over there what we can do we can move right to the action P action file this is the action right actions file so we can apply the revalidate method this is a default function of exus 14 so we can apply the revalidate revalidate path revalidate path okay and the path from that the path should be whose path you would using like if the there is a uh user or this is a dashboard so the path should be dashboard now we have the base path so base path should be like this okay now if I create another user okay you can see the magic happening so after that let me show you how you can Implement if there is a a loader function that will be great like you have created a user and there is a loading method will be great okay so how you can implement the loader using server action so let's move over the single user here I have created the button okay this is the form single user form so here is a mechanism before we dive in let's divide the code inside your case then it will better from you to understand from your end this is our form right and there is button now what we'll do we'll separate the button to another component this should be a button component and this is the form and we will implement the button with the separate component let's create a file called action [Music] button TSX let see and if I move the button over there this is the single user button or not single user button we'll use the form new user form button this button yeah we'll move over there and paste it and will action button Implement action button here so here you will understand how interact between the server set component with the client side component and how we can show the loader okay I can pass a props like title and title should be submit submit okay and inside I will write okay I can write over there interface and I props as we did before title is string so we can write I props over there okay perfect now we will print the submit over there so you can see the button is visible perfectly okay even the button will work as as you uh as as before let me create another user another user another at gmail.com if I submit okay so button is working as before there is no issue now the feature we want how you can Implement a loader inser the button this this is a react default react function which is called use for status we will use the use for status okay so if I console the test I can see what we are receiving and as I told you before how we interact between the server site and the client site so this use forus this is the client site function function so we have to write over there use client yeah now sorry use client if I refresh this it will gone okay so console this let me go to the console yeah you can see there that if I print the console yeah over here you can find what kind of data you found the pending the dat the method action okay so now if I press on submit gr user gr [e-mail] if I submit look look over there okay so if I submit you see the pending true pending true pending true pending false and data is which is carry the form data the method is post okay action as function so we are getting one two three item from there so we will use the pending only from the use form status so let's D structure this and uh we use the pending pending okay fine I don't need the test anymore now that means if the pending is available then a loader loader will show if not then loader will height if pending then [Music] then submitting submitting okay otherwise it's completed or leave it empty just for test so let's let's look at look over there like uh grade four grade four at the rate of gmail.com submit you see I I think it is quite fast and it's it's hard to check the loading status let me Implement like for set timeout so insert the action see action this is the function we are going to use so over there we will Implement a function which is called set timeout so a new promise resolve set time out set time out for 2 seconds right and perfect okay for the 2 second the loader will visible so if I change to five grade five submit you see submitting submitting okay perfect so let's uh move to the button over there again here so we can print our title there uh and we can write working okay that should be fine now now if I click on there submit see working it's done that's fun you know again if I create another user seven submit done so this is another comparison if I told you the traditional style if you want to show a loader that will be lots of function we have to implement but using server action and uh the use form status this is quite quite easy to show a loader or insert the component so that's it for now in next video we'll implement the delete function also share how you can Implement a confirmation window how you can imp Implement a react hot toast to show the user has created the user is deleted that's it for now and please don't forget to subscribe the channel hit the like and Bell button that will you'll never miss any video from my end and uh have a great day bye-bye take care love you guys

Channel: Sandipan Das

Views: 971

Keywords:

Id: 6KS7gqMgb1s

Length: 42min 5sec (2525 seconds)

Published: Fri Dec 29 2023