Learn Next.js 14 Server Actions With This One Project (UseFormStatus, UseFormState, Error Handling)

[@nachiketpushkarna3295]

What i genuinely like about you is, that you are not like a normal tech youtuber, who's hungry for views. You are actually teaching with industry level best practices and producing quality content. Keep up the great work man !!

[@codinginflow]

Thanks man 😊 I still like views tho

[@JeremiKress]

One of the best teachers on KZbin!

[@codinginflow]

Thank you very much

[@joshtriedcoding]

Woah amazing work man, congrats on getting such a huge project out!!

[@codinginflow]

Ehrenmann

[@flan_02]

@@codinginflow @joshtriedcoding 1 programmer from germany, other from the US and other from Argentina. NEXTJS is a worldwide framework right now...

[@AmphibianDev]

10/10 Web Dev coding tutorial, the best on KZbin, in my opinion. I want to say, the fact that you took the time to first show the simple example and then step by step add more libraries, it's really amazing and shows how much thought you put into this. And every library you chose to use here is the modern and best way to code in my opinion. I researched a lot and came up with the exact tech stack you used right here.

[@codinginflow]

Thank you 😊 I put a lot of effort into the preparation to build the project in a logical and understandable way

[@ebratz]

Thank you so much for this video! You unblocked so many questions I had before... very good quality and condensed content. You nailed on removing boilerplate, repetitive and worthless parts, focusing on what really matters!

[@codinginflow]

Thank you! I put a lot of effort into the preparation and I'm happy you liked it!

[@Charizm0]

I'm just amazed at the quality of this video. The amount of effort that has been put into a free content is amazing. Love how you go deep into why you were doing certain things a certain way.

[@codinginflow]

Thank you! I spent a lot of time preparing this tutorial.

[@blaqhakym]

He is something else right. On top of all that he still reacts to every comment and make comment where he dims it fit. He is exceptional. One day, I'll be capable of showing you the appreciations I really mean in my heart. I'll strive to meet you in person and shake your hands and tell you how you impacted on my career and life @codingingflow

[@codinginflow]

@@blaqhakym Thank you for the kind words. Maybe we'll meet one day.

[@blaqhakym]

@@codinginflow A fulfilling day that'll be 🎊

[@codewithantonio]

Awesome course!

[@codinginflow]

Thanks for stopping by Antonio 😎

[@ScottUmble]

I've been wanting to just have someone building nextjs projects in the background while I do other things. I'm not following along, and I miss stuff, but I pick things up every watch and it's perfect. Thank you for doing these!

[@codinginflow]

That sounds pretty chill

[@Alkyen]

One of the best tutorials about new react features I've seen so far, thanks a lot!

[@codinginflow]

Glad it was helpful!

[@laxmanchoudhary2367]

I cannot find any better instructor than Florian whether be it paid or free courses. Thanks so much for putting this high value courses to be available for free.

[@codinginflow]

Thanks for the kind words my friend

[@codewithAbdulMumin]

u are the best....anybody looking to learn next js should look nowhere else. this is the best channel. thank you for providing free quality contents for us

[@codinginflow]

Thank you for the kind words brother

[@YuuffyLIVE]

Found you through instagram and its really refreshing to see someone going really indepth teaching some topics and not just scratching the surface. There are also so many topics here that improved my project or tools I didn't know about yet (like fixing the prisma client bug in nextjs or prisma studio). Thank you!

[@codinginflow]

Glad you liked it 😊

[@raghav_achari]

When this man teaches, it's clean and concise.

[@codinginflow]

Thank you 💚

[@Alalspsp]

I'm planning to add the sign-up function and chat function that I previously learned. For several days now, I've been having a hard time figuring out where to start with the prisma model, copying and pasting code, etc. Not only that, I've only seen 1/2 of this video yet. I think I will keep thinking about how to incorporate this video into my project until the end of this video. It's been 4 months since I learned coding, but this video is the most difficult. I think it's because there are a few functions that I haven't seen and there are a lot of functions of functions. But for me it is the most valuable video.

[@SuperCorde]

The most useful and demystifying web development tutorials you can find in KZbin. Thank you for sharing us your knowledge.👏👏👏

[@codinginflow]

Thank you for the kind words 😊

[@Vision-Zar]

First video that I followed till the and and it worked as expected thanks Bro

[@_hugo_cruz]

IMO this is the best tutorial on Nextjs and the complete roadmap currently needed. Thanks man for this.

[@codinginflow]

I agree 😁

[@kaiiemsawat2415]

I am about half of the tutorial now. And as always, this is another wonderful piece. Thank you Florian.

[@NimanthaNadeeraka]

Wow, this tutorial is incredibly helpful! 🌟 I've been struggling with nextjs, and your clear explanations and step-by-step instructions made everything so much easier to understand. Thank you for taking the time to create this content; it's evident how much effort you put into making it accessible and informative. I've subscribed and can't wait to explore more of your tutorials. Keep up the fantastic work! 👏👍"

[@codinginflow]

Glad it was helpful!

[@GiorgiTskhondia-x4w]

Very high quality content. You are answering the questions right after I am having one naturally. Great job

[@codinginflow]

Thanks man! I put a lot of effort into this video!

[@Jaco_codeeza]

Greatefull for the components starter pack.Its really a good kick starter kit to a persons career as a junior developer. Thanks alot.

[@ugurdev]

The amount of things I learned in just this video and the next auth v5 one is mind blowing, so many small details that just works flawlessly. Super high quality stuff, thanks. I will watch more as I find time.

[@codinginflow]

I'm happy to hear that!

[@melkhywong7594]

i have completed the tutorial since the release of this video.. i learnt a lot.. thanks!

[@codinginflow]

Very happy to hear that!

[@insensibility]

You're the best teacher I've seen so far. And I love the way you teach concepts. I only watch your tutorials to keep my style consistent. This is awesome, man. This will be my next personal project! Did it ever cross your mind to create a dentist booking tutorial or such? That would be awesome with React Email or Resend.

[@JohnBuildWebsites]

Only a few minutes in and already seen enough to subscribe. Looking forward to seeing more.

[@codinginflow]

Take a look man 💚

[@IsB-q6q]

Great teacher ! Amazed by how much I learned from this one video. My first 2024 project was worth it. I definitely recommend that content. Thank you !!! I have a small remark. When filling in environment variables on Vercel, I just copy-pasted the entire local .env file at once into the first cell, and that properly inserted all the variables.

[@codinginflow]

I didn't know that! Thank you for the tip! Also, I'm happy that you liked the video!

[@wibbs88]

Just a tip.. If you copy all the environment variables and paste into the first Vercel input it creates them all - rather than doing it one at a time. I also found that the pages not created (about/terms/privacy etc) when clicking the logo to go back to home url the url changes in the browser but the site doesn't reload. Doesn't do it when it's a genuine not found page - job listing that doesn't exist so that's all the matters.

[@orzarhi]

- Regarding environmental variables, you can simply select everything and paste. 6:15:36

[@codinginflow]

thank you

[@mohamed_mahran]

Just completed the video. It's absolutely worth it. Thank you so much for the video bro!

[@codinginflow]

Thanks brother

[@rubinbajracharya9319]

Amazing Course. Can you also create a separate video just using and configuring zod. I see that the approach you have taken in this video is advance one and would like to learn more. Thank you for this amazing content again. cheers. 🥂🍻

[@ilan117]

Hallo Florian. Thank you! In this tutorial not only that you learn how to develop such application but also your learn so much about the (in and the out) of server components and many goldmine tips you could not even imagine. I appreciate Florian on how you conducted this tutorial. …… I hope to get an answer on that wish … allowing to upload multiple files e.g. pictures. Could you possibly help with this wish ?

[@MuhammadRidha-dh6vb]

Thanks a lot guys, I'm glad I finished this tutorial, it was a lot of effort, but taught me a lot of new lessons!!!

[@riozganova7741]

This is absolutely the best project tutorial, It's very helpful. Thank you for the effort you put in this work!

[@codinginflow]

thank you for the kind words 💚 pls share it with someone

[@yogeshvanzara5553]

it's nice you explain little little edge cases in application like there is lot to do in form here . great ❤❤

[@chrschoeni]

Mega Video. Danke dass du dir so viel Zeit nimmst für solche noobs wie mich.

[@codinginflow]

Danke Bro

[@mohdsahil226]

Really Thank you for this awesome tutorial! Would you please also create a video on setting up the project Like lint-stage, husky, multi-language? I request you to please answer how to catch typescript errors in dev mode?

[@TheAremoh]

I subscribed just few minutes into the video. Great content

[@codinginflow]

Thank you 😊

[@blaqhakym]

This man, I love, and he knows it 😊. God bless you boss

[@codinginflow]

Thank you brother 😊

[@andreaswu7973]

quality content for free. couldn't ask for more

[@codinginflow]

Thanks man!

[@temitopedavid9508]

Thank you man!!! You've being helping improve my skills recently

[@codinginflow]

Happy to hear that brother

[@LuoYingjie-g7h]

Best teacher for nextjs! I have question that: How did you know which packages you need like the wysiwyg? Just google and browse stackoverflow?

[@codinginflow]

I tried out a few different ones until I found one that I liked!

[@adarshrathi8265]

excellent excellent buddy love from india, are you also made on graphql

[@marshall98]

Fabolous tutorial. Thank you a lot for your efforts. We appreciate it.

[@codinginflow]

Glad you liked it!

[@ectoplasm1285]

thank you, will try to follow tommorrow.

[@codinginflow]

Do it!

[@officialp1ng]

Thank you very much. I truly appreciate your content, and the tutorial has been incredibly helpful for my learning journey.

[@codinginflow]

Glad it was helpful!

[@kwasiezor1630]

Very nice project. Good work. I like the way you keep things simple but well explained. Thanks Bro. Keep it up 👍

[@codinginflow]

Thank you for the kind words!

[@kwasiezor1630]

@@codinginflow you're welcome

[@bipinc1577]

Zerver Zupremacy, one of the good next tutorails fousing on serverside

[@abdelrahmanmagdy3706]

You are the best bro .. thank you so much ❤

[@codinginflow]

Welcome 😊

[@abdelrahmanmagdy3706]

@@codinginflow in terms of authorizing the urls that calls server actions is there a secure way to authorize these requests?

[@codinginflow]

​@@abdelrahmanmagdy3706 You can do use authentication just like in a normal backend if that is what you mean. I think we do that in my e-commerce tutorial.

[@abdelrahmanmagdy3706]

@@codinginflow kzbin.info/www/bejne/d5LMmp17iLZ7a9E&ab_channel=CodinginFlow you mean this, right?

[@hamzaelassri8889]

Wow, what an incredible tutorial! 🌟 Your clear explanations and step-by-step guidance in Server Actions have been immensely helpful for me . Thank you so much 😍😍🚀 If I may suggest, I'd love to see a video on creating a multilingual website in Next.js using i18n. Your teaching style is fantastic, and I'm sure many, including myself, would greatly benefit from your expertise in this . Keep up the amazing work! 👏🎥

[@Simple_OG]

Thanks, You cleared my most of the doubts about server actions, Just a small request can you make a guide on prisma client

[@codinginflow]

Happy to hear that! What do you want to see?

[@Simple_OG]

@@codinginflow like how to use prisma to authenticate user how to check if user is login or not how to create relational database how to store info in database when user sign up using third party authentication like clerk or auth js

[@codinginflow]

​@@Simple_OG In my Next.js ec-ommerce tutorial we use Prisma together with Next-auth. have you watched it?

[@Simple_OG]

@@codinginflow i am new subscriber , i am going to watch once i complete my twitter clone, Thanks for the reply

[@codinginflow]

@@Simple_OG Good luck!

[@bryik_]

Your channel is top listed for me now

[@codinginflow]

thank you 🤩

[@CodeWithMalinda]

This is great stuff. Really appreciate ❤. Just to clarify > Next js quotes, "generateStaticParams should return an array of objects where each object represents the populated dynamic segments of a single route." But you return array of strings. Am I missing something?

[@codinginflow]

You're right, I made a mistake. It should be wrapped into an object { }

[@CodeWithMalinda]

@@codinginflow Thanks for the reply

[@hemanthchowdary7150]

Awesome 🤩 Thank you 🙌🏻

[@codinginflow]

Pleasure!

[@raabisliman]

Im following and enjoying your videos.

[@regilearn2138]

Awesome work bro.I would like to request AWS S3 file upload and AWS lambda function integration for this, bcz these are the thing industry used tech now a days.

[@Alalspsp]

If you download all the source code, run the web, and complete Post a job, but an image-related error occurs, please refer to the video at 4:36:00.

[@elisionqyrdedi5336]

hey florian i got a question why you not using bun js but the npm where is the difference? i loved the tutorial btw the best teacher for real❤

[@davidlintin]

Not sure if it's an update in shadcn but I'm pretty sure you can have the select component as a server component and get the value of the selected item from form data.

[@davidlintin]

Nope think I was wrong lol I used it inside the form component from shadcn

[@ammarhaidar5995]

Brilliant!!!💪💪💪, such big projects are very very Awesome, I hope that you make a project about open AI new assistant API, there is no comprehensive tutorial about that with Next js until this moment.

[@codinginflow]

A tutorial on that is planned once the api is stable

[@olusolaafikode853]

Thank you Coding in Flow

[@codinginflow]

Thank you for watching!

[@yoyo26-34]

impressive video. Thks a lot. It seems to answer my question but I will post it anyway : does it mean that with NextJS, ZOD and React hook form, we need to choose between 'action = **' and 'onSubmit=handleSubmit(***))' when using server actions ? Because when I set both of them, the RHform seems not to be submit. And as I want to benefit from CLIENT AND SERVER sides zod validations, I have to use handleSubmit only to get the client validation and manage the server validation into the action called by handleSubmit fonction. Am I Right ?

[@codinginflow]

That should be right

[@kiddofrancesco1622]

Who makes a billion a year!😂 You are good man.

[@Jaco_codeeza]

Hey Florian. Can you perhaps tell me why the create jobs form creates a job when I'm in the npm run dev command and not on the actual link of the vercel deployment?

[@NikKhanpour]

thanks to share your science and experience to create vercel blob need to click on blob on storage section on vercel dashboard as mention in the video but there is no section for blob how can create blob for storage on vercel dashboard? thanks again

[@stormsacidspirit2679]

click create database again and select blob

[@letthesuntalk]

Nice video man, thank you so much. I have a question, do u have an idea how can i implement filters in Drizzle instead of Prisma?

[@devsirat]

It was a great video to demonstrate server actions. But I have a question for you though. Do you like this way of mixing backend logic into frontend? Since you were an Android developer where the separation of concerns was a big deal

[@codinginflow]

Android is a broken platform so the architectural decisions there are not really relevant on other platforms.

[@devsirat]

@@codinginflow well I was being general. It's very common in other enterprise environments. Like .net and even angular.

[@codinginflow]

​@@devsirat I would say make it dependent on the project. If you project is small, no point in overcomplicating it with unnecessary abstractions.

[@devsirat]

@@codinginflow makes sense

[@dileepa-mn2to]

keep making full videos bro

[@codinginflow]

Sure 👍

[@hercialVitalis]

Great stuff

[@codinginflow]

Thank you very much

[@mnhtada12]

Awesome teacher with awesome content , thank you soo much for ur effort🤍. , could u please make a video for multi language and translating ?

[@skverskk]

Beyond excellent!

[@Deus-lo-Vuilt]

Thanks , a super interesting and fun project , it's appreciated , keep it up , I'll keep an eye on your next projects , while I'll be doing this one , a hug and life Nextjs :3

[@codinginflow]

thank you so much!

[@rdnexta]

Hi,Nice project, I have one serious question,I am building start -up of hiring, can I use your project in my component. Plz reply❤

[@codinginflow]

Sure

[@gynflo]

@codinginflow Hi Florian, great course as usual, you do an excellent job with a very concise approach. I have a question, I'd like to update a job, but with the wysiwyg component, I can't put the value to be updated in it.

[@ZulfikarPremium]

Thanks u very much thats very helpfull sir

[@ilan117]

Hi Florian ❤ waiting for your next 😊tutorial hopefully in next.js 🤲 I wunder why in here you just have the approve and delete job post but no edit ??? could you add this for us pls 👌

[@EHSUNATARIM]

Hi Florian, thanks for wonderfull tutorials. Can you help please, my action function approveJobSubmission is not trigered. :( Some how all code skiped to the end and only final redirect at the bottom is trigered and im redirected back to '/admin'

[@ilan117]

Thank you Florian ❤

[@codinginflow]

You're welcome 😊

[@Jaco_codeeza]

If i may ask, why didnt you use tanstack server state manager on this project like you did in the social media nextjs 15 app?

[@codinginflow]

Because we don't have infinite loading or optimistic updates and hence it's not really necessary

[@Jaco_codeeza]

@@codinginflow ok thanks. I'm still very new to server actions and are trying my best to differentiate between the state management and server actions.

[@Jaco_codeeza]

@@codinginflow I'm trying to find a uniformed pattern of managing queries and mutations. So I basically thought that tanstack is a dependency that we use in every project. But thanks again

[@codinginflow]

@@Jaco_codeeza Server-side rendering in React has made a lot of usecases for React Query obsolete

[@mhraihan7422]

can you make a test tutorial base on the tutorial, please?

[@leuel_a]

When will you have a tutorial for Next.js + [State Managment Library]???

[@ibrahimcious]

great! thanks man!

[@codinginflow]

Thank you for watching!

[@PeriklesPeriklesoglu]

thanks man i really appreciated

[@flan_02]

1:58:25 OKEY, BELLISIMO

[@jamesmuhoro8568]

Thank you very much

[@codinginflow]

Pleasure!

[@rishiraj2548]

Great thanks

[@codinginflow]

Thank you too!

[@dimitridoroshko]

Florian, my man, could you please make a video of your VSCode setup, extensions and settings?

[@codinginflow]

For recording I only use the extensions I show in the video

[@dimitridoroshko]

@@codinginflow what about production ready setup?

[@codinginflow]

@@dimitridoroshko That depends on what tools you're working with but I highly recommend GitHub Copilot 😆

[@leuel_a]

I dont understand how the useFormState works? Like how does it work? Like javascript is required so how can the page progressively enhanced still?

[@codinginflow]

I don't know to be honest 😆 But I'm wondering the same

[@pavankumarkr5667]

for me the clerk authentication form is not getting triggered when I hit /admin ,can you please tell what to do

[@codinginflow]

double check your middleware

[@pavankumarkr5667]

@@codinginflow sorry my bad, the spelling of the middleware file was wrong , now it is working fine ,thanks.

[@alexg7282]

Thank you !

[@Alalspsp]

As a coding beginner, I have a question. In your video, you do very complex coding. Did you memorize it all? I can't believe it. I think my head will explode because I want to memorize all of this and code it someday. Is this situation real?

[@codinginflow]

You don't need to memorize anything. You can just google or look at old projects. The things you use over and over again you will memorize automatically 👍🏻

[@OmarFaruk-bz4gw]

complete this project, thank

[@codinginflow]

good job brother

[@HarshDoes]

Hey, I already have one PostresSQL database in vercel account. I can't create anymore, unless I buy their paid plan. Any other way to get it done without deleting the one I have? Help plzz...

[@codinginflow]

You can use any other kind of Postgres DB. Just replace the connection string in the .env file.

[@Vision-Zar]

can you please do SEO (sitemap ,robot, google analytics and adsense) for this app please...............☺☺☺☺

[@adarshrathi8265]

bro you made 1 video on Twilio sms phone no verification in next js server action for verification phone no. please small video for sms verification next js with twilio

[@zoltanmolnar6956]

yes absolutely nice, could you please update your paid tutorial to Next14 as well please? I will buy it.

[@codinginflow]

It's updated to Next.js 13.4 which is pretty much the same as 14.

[@Omarwaqar-pt7wf]

Why did you use the slug?

[@codinginflow]

for what?

[@MatiasGodoy-qb5cc]

I followed this tutorial, when I apply the filter the UI flash for a minute before giving filtered results. Anyone has the same? I’m following exactly the same as the tutorial

[@kwasiezor1630]

Can you please provide also the finish code link for this project?

[@codinginflow]

It's the "Final-Project" branch in the linked repo

[@anonymous12478]

Thanks

[@codinginflow]

Thank you for watching!

[@Olti-p2h]

1:09:05