I'm definitely using this library for all server actions now
Вставка
- Опубліковано 5 тра 2024
- My Products
🏗️ WDC StarterKit: wdcstarterkit.com
📖 ProjectPlannerAI: projectplannerai.com
🤖 IconGeneratorAI: icongeneratorai.com
📝 ThumbnailCritique: thumbnailcritique.com
Useful Links
💬 Discord: / discord
🔔 Newsletter: newsletter.webdevcody.com/
📁 GitHub: github.com/webdevcody
📺 Twitch: / webdevcody
🤖 Website: webdevcody.com
🐦 Twitter: / webdevcody
Good find, buddy.
A short vid like this explaining your page loading bar would be golden.
This is actually really cool. Will use it for sure.
Great stuff as always, can't wait for an in-depth video of your starter kit. As someone who does C# at work & js as a hobby i'm hoping you will add ci/cd with AWS ec2 or other for your starter kit . Many thx for your content!
Sick. Thanks for sharing.
Good job babe!
Great, I've implemented my own action wrapper, but this seems way cooler.
Hey cool, thanks for sharing, this will definitely help.
Since you mentioned zod, is there a good way to make it output errors in different locales?
In your implementation, in your middleware, does that mean every single request has to hit the db to get the current user?
Lovely video, I just started using server actions and this will help me handle those. If possible could you make a video related to server actions? and if we should use them instead of regular API call. Thanks
Hi cody can you share how do you have multiple apps in one Next.js 14 project ?
Great content as always bro. If you’re using convex db do you need server actions? And what web api or library are you using to get the user IP
No with convex you invoke their mutations and actions directly which has its own form of parsing / validation. The ip is just coming from inspecting the headers
Bro how you do rate limit can you please tell me
I mean, if you have auth in your application cant use just check if the certain individual exists and has proper access to the protected endpoint? Do you mean for open endpoints?
Yes, but I’m talking more about parsing input (like verify an email is actually an email format)
@@WebDevCody Understood, so something like safeParse?
That looks very much like tRPC (Especially on the backend and client side)
Server Actions do have many advantages but I think for most cases I will use tRPC (client side call)
Server actions are unnecessary bloat. Just use a normal API endpoint
@@skyhappy I dont think so, there are quite nice, especially with this helper. tRPC gives you typesafety and server actions allow you to make your form work even with JS disabled. There are more advantages for both of them but these are the most important ones for me.
@@JakobRossner-qj1wo JS disabled, ok. Tell me how many digital projects you'll need JS disabled? maybe 1%? Lets be honest, it's 100% better using Client side for UX / UI purposes. It's not like your application will be heavy and unsafe for not using Server action
yes im using it.
This seems similar to TRPC but for server actions, cool.
how do u use server action in client component. Like with this startTransition thing, i truly don't get it
you need to define the server action in a separate file, and if you do revalidatePath or redirect inside the server action, that's when you need a transition where you call startTransition(() => myAction()). The transition is to help keep any button spinners or loaders in place as your application is trying to refresh the other parts of the app after a redirect or revalidation
What theme is this? And the gutter colors ?
shades of purple // indent rainbow
Bearded theme stained blue
the idea of using this lib is to mostly use client forms instead of forms in server components, right? I see in docs they say "Functionality is limited in this case"
Yes I think so. I use client components for all my forms anyway
@@WebDevCody why? Curious
@@ESArnau because often I need to show a toast, pop up a banner, show confetti, etc after a user clicks a button. You can’t really do that unless you add things into the query string to show a toast after revalidating the path.
@@WebDevCody I see, and why would you use then this next-safe-action approach instead of trpc?
Have you ever encountered issues when using useAction to create a form with a file schema?
what do you mean by file schema? like uploading a file to the server action?
@@WebDevCody I think having issues by Zod : z.instanceof(File)
Hey cody, make a one shot video of a complete project in next & also websocket ( if possible). But make sure without any 3rd party library like convex, firebase etc..
Something like how do you start a new project, how to set it up, what would you use, etc. Thanks Cody
Would you consider this as necessary in production? How could I protect my server actions without this package?
You’d at least want to parse the inputs if parsing is necessary. For example if your server action takes a number for an argument, technically someone could send a string, so you should check that (typescript won’t check it for you at runtime)
@@WebDevCody Thanks for explanation! I will definately check that out
@@WebDevCody wouldn't zod be checking that FOR you? isn't zod checking on the server? when the actions are on the server?
@@ValipPowa yes, zod checks it for you, which is why I’m using this library to have zod check for me
Really nice library. But luckily I never really switched to using server actions and stayed with tRPC for all client component stuff. It essentially has the features this library offers built in. Also I prefer handling loading states, error states and all the good stuff using tankstack query (which is used by tRPC). Server actions are cool if you only have like 1-2 forms, other than that I still recommend tRPC
This was what I was wondering. I’ve already understand react-query.. why would I throw that away to learn server actions?
jeez, frontend is complicated (and I am a frontend dev)
how you will pass files in safe action
I’ll be trying to figure that out soon
What's inside your "@/lib/session"?
Just wraps next auths get server session
sounds they're taking inspiration on Remix. Good!
ohh really, can you explain why exactly since i havent dealt with remix
Hi sir
I saw rate limiting code in your application ca u give us examples of free rate limiter
Just like express-rate-limiter
In express js
It will be very helpful for us
Thanks 😊
I published a video today on it
Are you still using upstash for your rate limiting?
Right now it’s just in memory because I host on a vps.
@@WebDevCody can you make a video about it,
most of us using vps/dedicated server rn 😶
thank you!!
@@iken_ar sure
Why is this so complicated in react/next? This could be done way simpler. I am the only one thinking so? Not working on react, but like the Content. But this makes me love vue even more when seeing such "simple" things blows up so much code.
Wouldn't that be handled though middleware group, limiter and cors already?
I'm not sure what makes this complicated? it's just a function which runs validation using a schema. it's no different from adding a middleware which runs validation against the form post data.
i gave up on server actions, and nextjs as a whole. dev experience seriously sucks when the project grows in size. I'm finding a better and more performant experience with vite, hono + bun and tanstack router
lol this is full circle ... add server code into front end and then step by step realise why having api server was actullly a good idea
Yeah the more I’m seeing additional steps outside of the simple example for server actions, I’m wondering what (if any) benefit there is over something like tRPC.
why not just make a post api route'!
Because I want to be cool
OMG Sheesh Why?
A library to fix a problem inherent to nextjs. And this is why I hate the state of FE development
Not just frontend development, this is the problem with entire JS ecosystem.
How is that a problem specifically with nextjs? If you made a rest api in express you still need to validate your user inputs
This is a nextjs problem.... The rest of us in FE don't have these problems
@@DanteMishima but server actions are backend. It sounds like y’all think server actions are front end related features
You're clueless man
2
Latam moment when this video doesn't load up 😵💫
how about you create a safe api endpoint and add cors so you don't have to overcomplicate some useless bs? like this is a joke