Next.js 14 Server Actions | Everything you need to know!

Рет қаралды 8,469

Күн бұрын

Learn everything of Next.js 14 Server Actions with this in-depth guide! In this video, we dive into Next.js 14 server actions, exploring their usage, data revalidation, managing pending states, resetting forms, and handling errors.
👨🏻‍💻Github Repository: www.janmarshal.com/courses/ne...
☕️ Buy me a coffe: www.buymeacoffee.com/janmarshal
🌍 My Website: www.janmarshal.com/
📧 Business ONLY: jan@alenix.de
Resources used:
Next.js: nextjs.org/
Supabase: supabase.com/
Prisma: www.prisma.io/
Timestamps
00:00 Intro
01:45 Installation
04:30 Prisma Setup
09:30 Create Server Actions
01:00:00 Deployment

Пікірлер: 33

@janmarshalcoding 3 ай бұрын

Quick FYI, supabase changed a few things in regard to their core infrastructure (supervisor). To make the connection with prisma and supabase work, please follow the following guide: supabase.com/partners/integrations/prisma

@2pacrapempire866 3 ай бұрын

This is amazing, thanks man.

@njihiamark6926 5 ай бұрын

Thank you Marshal!

@prashlovessamosa 6 ай бұрын

Thanks for sharing quite useful.

@adarshrathi8265 3 ай бұрын

you are excellent buddy , love from india

@afebriansyah805 12 күн бұрын

amazing explain

@arshah246 6 ай бұрын

That's really great you haave summorized many new concepts of next js. I think it would be great if you add somee info about disabling the button while saving/updating thee data. Although really really great conceptual video especially using a server component inside child component and it doesn't cause hydration

@joakuvideo 6 ай бұрын

disable={pending}

@erfanrahimie 5 ай бұрын

The tutorial was excellent, I have a few questions I would really appreciate your help with. I was handling my website's forms using react-hook-form and zod, but you fully implemented this functionality using server actions. In your opinion, which approach do you think works best for me? I would really appreciate any guidance you can provide.

@adenugbamicheal2140 6 ай бұрын

I'm enjoying this... more content boss

@janmarshalcoding 6 ай бұрын

Next week, something special 🤫🤫🤫

@arshah246 6 ай бұрын

@@janmarshalcodinge commerce app with AI chatboy will be the best because will cover all the modern chalanges and would be great for us

@debrauwermichael2366 4 ай бұрын

Great video, but my problem is when I export the functions from "actions.ts", my "/better" page gives me this error: Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".

@zunnoorainrafi5985 6 ай бұрын

Hi Marshal, is there anything like server actions in Remixjs? Which you think is better in Server Components between Remixjs and Nextjs? Waiting for your kind reply...

@janmarshalcoding 6 ай бұрын

Hi, In Next.js you have server actions, in remix you have actions. The difference is that you can call server action from the component level, while in remix you call them from the route level. There is no better in nextjs or remix. Use what you like and feels more natural.

@zunnoorainrafi5985 6 ай бұрын

@@janmarshalcoding OK, thanks.

@mdazimbabu5001 6 ай бұрын

Is server actions possible with separate backend ?

@majidraimi 6 ай бұрын

Yes it is

@sksabbirhossain2686 4 ай бұрын

😍😍😍😍😍😍😍😍🥰🥰🥰🥰🥰🥰🥰🥰

@user-sv9es4nh9k 6 ай бұрын

What is your theme please ?

@janmarshalcoding 6 ай бұрын

Aura Theme

@horacinis 6 ай бұрын

How can I set the formData to an empty string after creating a new todo?

@mdfaran7150 6 ай бұрын

One hack is to use key.

@galaxian9393 5 ай бұрын

404 error in your GitHub repo

@janmarshalcoding 5 ай бұрын

fixed

@__a8as 6 ай бұрын

You spent 1h on explaining almost nothing

@janmarshalcoding 6 ай бұрын

You're welcome 😉

@joakuvideo 6 ай бұрын

I loved the explanation, thanks!@@janmarshalcoding

@noormuhammad888 2 ай бұрын

what are you talking about? He has explained server actions better than many others did.

@arshah246 6 ай бұрын

i am facing an issue while updating my todo. in my case i am using another file todo/[id]/page.ts for updating my todo here the problem begings. i get the id of todo using params. and send the id to form using input type=hidden method. again i catch the id const todoid=formdata.get('id') as string and pass this id to prisma for updating it shows me error. because i am converting the id as string.

@janmarshalcoding 6 ай бұрын

what exactly is the error?

@arshah246 6 ай бұрын

@@janmarshalcoding sir i have resolved the error the error was in my params. when i console log the params i find out that id is inside the params object and i was only using params.id that is why it was showing me null value or undefined then i used params.params.id it show me the id of the todo. thanks for your time.

@janmarshalcoding 6 ай бұрын

Cool, if you destructure the params you could also just do params.id, so in that sense ({params}: {params: {id: string}}).