Best way to write Next.js Server Actions ✨

Поділитися
Вставка
  • Опубліковано 24 гру 2024

КОМЕНТАРІ • 66

  • @WebDevCody
    @WebDevCody 6 місяців тому +18

    Zsa let’s go!

  • @AmitErandole
    @AmitErandole 4 місяці тому +1

    I know this video wasn't about form validation. But I couldnt see rhe part where live client side validations were used from the zodschema with react hook form.
    Is there another video where you show us how client side validation with live errors are shown to the user?

    • @nikolovlazar
      @nikolovlazar  4 місяці тому +1

      You can see the definition above the "useServerAction" usage, but I actually created a gist for you: gist.github.com/nikolovlazar/824dd3efb67228f673e40494ed8e63a4. Hope this helps!

    • @AmitErandole
      @AmitErandole 4 місяці тому

      @@nikolovlazar this looks good. Very readable. Just a little confusion though. Where will the errors show up in the jsx? Is it the j component? Also shouldn't there be a onChange mode enabled on react hook form?

    • @nikolovlazar
      @nikolovlazar  4 місяці тому +1

      @@AmitErandole Yes it's the component. These components are from the shadcn/ui library. Here's how it's implemented if you want to replicate it, but don't want to use shadcn/ui: gist.github.com/nikolovlazar/a270127f8a3271a1d6db289030048b57. It's basically using the "useFormContext" hook that comes from "react-hook-form" to obtain the parent field state, in which the error is defined.

    • @AmitErandole
      @AmitErandole 4 місяці тому

      @@nikolovlazar great. Thank you so much for sharing this. Helps me connect the dots

    • @nikolovlazar
      @nikolovlazar  4 місяці тому +1

      @@AmitErandole Of course! I'm glad I can help!

  • @semyaza555
    @semyaza555 5 місяців тому +1

    What’s the advantage of zsa over something like next-safe-action?

    • @nikolovlazar
      @nikolovlazar  5 місяців тому +1

      I haven't used next-safe-action, but just by glancing at the docs it looks like it does the same job for the most part.

    • @semyaza555
      @semyaza555 5 місяців тому

      @@nikolovlazar 🙏 Thanks. Love this series btw.

    • @nikolovlazar
      @nikolovlazar  5 місяців тому +1

      @@semyaza555 Thank you!

  • @finetopethiopia4095
    @finetopethiopia4095 5 місяців тому +2

    Amazing video, Lazar. One thing I noticed is, you are very comfortable working with NeoVim, but as someone like me who have never tried it, it is kinda confusing. Do you have a plan to record your videos using Vscode?

    • @nikolovlazar
      @nikolovlazar  5 місяців тому +1

      Thank you! I would be a lot more descriptive to what I'm doing in a video than a live stream. If I'm going to a certain file I'd say it out loud, so even viewers who aren't using Neovim can understand what's going on and are able to follow along. Live streams are where I figure stuff out 😅 Appreciate the feedback though.

  • @loic299
    @loic299 3 місяці тому

    Hey Lazar, thanks a lot! Would you recommend using clean architecture infrastructure over the Server actions/ZSA approach? Or would using both be overkill? ZSA procedures already doing the controller job right? (Not to mention the fact that the framework is not decoupled from the interface layer)
    I need to expose my HTTP API, so I dlike to share the controllers functions/ZSA actions with both the HTTP API route handler and client components. Is it considered good practice to call ZSA actions from the API route handler? I also looked into IRPC, but I'm a bit lost. Is IRPC obsolete with server actions + ZSA/next-safe-action?
    Thank you so much for your help!

    • @nikolovlazar
      @nikolovlazar  3 місяці тому +1

      Glad you liked it! Treat the controllers as part of your core app’s logic, and everything framework-related as a “consumer”. You want all crucial logic like input validation and auth checks to be in your core app logic, so all consumers will function the same. Instead of calling a server function inside of an api handler, just call the controller in both places and handle the errors accordingly. That would be the smartest way to go about this.

  • @bibblebabl
    @bibblebabl 5 місяців тому

    Thanks for the content! Can I clarify if it's possible to make a solid background without the light spot in the future? For some reason it's hard to read because of it

    • @nikolovlazar
      @nikolovlazar  5 місяців тому +1

      Absolutely! Thank you for the feedback 🙏

    • @bibblebabl
      @bibblebabl 5 місяців тому

      Thank you

  • @zakir.nuriiev
    @zakir.nuriiev 5 місяців тому

    Cool! Thank you for sharing such nice approach!

  • @warisaremou8754
    @warisaremou8754 4 місяці тому

    Hi all I try zsa but request is still show in network and I can see the payload. It's the same in the zsa documentation. I though request are made on the server side. I'm using react not nextjs

    • @nikolovlazar
      @nikolovlazar  4 місяці тому

      server actions are executed on the server, but the client has to perform an HTTP call to invoke them. That's why you see it in the Network tab. that doesn't mean that the action was executed in the browser.

  • @InekMarcinek
    @InekMarcinek 5 місяців тому

    Hey! Your videos really interested me on clean architecture. Do you recommend any books on that topic?

    • @nikolovlazar
      @nikolovlazar  5 місяців тому

      That's great! I personally haven't read anything other than "Clean Code" and the "Gang of Four (GoF) Design Patterns". You can also ChatGPT it 😁

  • @rajaark5643
    @rajaark5643 17 днів тому

    Can you share the vim commands? Are you using vs code or neo vim

    • @nikolovlazar
      @nikolovlazar  17 днів тому +1

      I'm using Neovim. You should check out this video: ua-cam.com/video/G7-qUMKSH_Y/v-deo.html

  • @HarisVFX
    @HarisVFX 5 місяців тому +1

    What are your thoughts on next safe actions?

    • @nikolovlazar
      @nikolovlazar  5 місяців тому +1

      Haven't used it, but it's probably a decent library like ZSA.

  • @chrschoeni
    @chrschoeni 5 місяців тому +2

    Amazing Videos for me to learn. I hope you make many more

  • @besuccessfull1891
    @besuccessfull1891 5 місяців тому +3

    So basically zsa is trpc but for server actions 😅

  • @furkankaracan2076
    @furkankaracan2076 2 місяці тому

    Thank you for your service sir

  • @interceptorghost1149
    @interceptorghost1149 4 місяці тому

    Hi buddy, could you provide your nvim config? It's pretty cool

    • @nikolovlazar
      @nikolovlazar  4 місяці тому

      Sure thing! github.com/nikolovlazar/dotfiles

  • @cabrelelvis
    @cabrelelvis 5 місяців тому

    It's very good I think, but why not separate the supabase logic in usecases for example, so that if you have to change bd or provider you won't need to touch your server actions which are already well structured

    • @nikolovlazar
      @nikolovlazar  5 місяців тому +1

      That’s what we’re doing! We’re still not done with the refactoring, but my goal is to isolate supabase and other elements of the stack into layers.

  • @Rajputana1974
    @Rajputana1974 5 місяців тому +1

    ZSA IS HERE 👍😅😊

  • @jacob_dmn
    @jacob_dmn 5 місяців тому

    amazing, appreciate your work.

  • @bibblebabl
    @bibblebabl 5 місяців тому

    Have you tried next safe action btw? What is the difference?

    • @nikolovlazar
      @nikolovlazar  5 місяців тому

      Haven't yet. I think for the most part the libraries are pretty much the same, but I haven't taken a better look at Next Safe Actions.

  • @nirmalscaria7258
    @nirmalscaria7258 6 місяців тому

    What is that IDE?

    • @nikolovlazar
      @nikolovlazar  6 місяців тому +8

      This is my Neovim IDE! You like it? I can create a video on how I set the whole thing up, but my configuration is always changing so the video will get outdated pretty quickly. I do keep my config open source though:
      github.com/nikolovlazar/dotfiles
      Feel free to poke around and see how I configured neovim.

    • @crossmindedninja5522
      @crossmindedninja5522 5 місяців тому

      ​@@nikolovlazarpls make a video to setup exactly similar to yours

    • @nikolovlazar
      @nikolovlazar  5 місяців тому

      @@crossmindedninja5522 let's do it!

  • @Michelbouf
    @Michelbouf 5 місяців тому

    no way, brother where are the videos of the expense tracker app

    • @nikolovlazar
      @nikolovlazar  5 місяців тому +1

      Had to move them to a different channel: www.youtube.com/@lazars-streaming-archive. The React Native are coming tomorrow and Monday.

    • @Michelbouf
      @Michelbouf 5 місяців тому

      @@nikolovlazar thank you, I know those videos are long because are made in a Livestream mode, not like a course or tutorial, but I wonder if the app is completed after the last video? And if db room, mvvc, di, and other stuff like that is covered?

    • @nikolovlazar
      @nikolovlazar  5 місяців тому

      The app is completed, but no DI or architecture or anything like that. There is a database though, so it is in a usable state.

  • @Mast3rDesign
    @Mast3rDesign 6 місяців тому

    great job Lazar

  • @blazi_0
    @blazi_0 5 місяців тому +3

    Cool to know but man too much work, also I love how server actions turning into trpc slowly 😂

  • @naylord5
    @naylord5 6 місяців тому

    🔥🔥🔥

  • @velinovleonid
    @velinovleonid 6 місяців тому

  • @zarock1044
    @zarock1044 6 місяців тому

    🤯 😍

  • @clickbaitpolice9792
    @clickbaitpolice9792 4 місяці тому

    I don't understand why you would do all of this. The NextJS documentation already shows best practices for using server actions

    • @nikolovlazar
      @nikolovlazar  4 місяці тому

      You'll find yourself repeating a lot of code when you need to share common pre-exec logic between multiple actions. Think about authentication, input validation, analytics, instrumentation, etc... That's when using ZSA (and next-safe-action as well) shines. If you don't do those things, then using these libraries will most likely be an overkill.

  • @aberba
    @aberba 6 місяців тому +3

    Simply don't write serious backend code with server actions. Anything beyond basic usage will end up in a messy unmaintainable code.
    Next.js isn't suitable for a scalable backend application. Imagine doing RBAC, rate limiting, metering, heavy middleware actions, and load balancing with server actions or the route.js/ts setup.

    • @naylord5
      @naylord5 6 місяців тому

      I believe Vercel only recommend SA with specific use cases, i.e. mutations, like basic CRUD operations.
      But definitely is not a replace for an entire backend IMHO.

    • @nikolovlazar
      @nikolovlazar  6 місяців тому +1

      I believe Next.js isn't a one-size-fits-all solution, just like any other framework, but I'm curious to hear about where you hit the limits of it. In what use cases have you reached the limits of actions, but you couldn't get the job done? Not being sarcastic, I genuinely want to know 😁 this could be a really good discussion, and even a video topic!

    • @deftex55
      @deftex55 6 місяців тому

      @@nikolovlazar Exactly the same thing I was thinking about. When implementing something like that, even the clean architecture in Next.js feels wrong somehow, but it's working, and we have 0 problems. Maybe this is the future of web development: monolithic frameworks.

    • @TianYuanEX
      @TianYuanEX 6 місяців тому

      @@nikolovlazar ​Unrelated to the original comment about code scalability, but one problem Next.js has is that WebSockets & SSE don't work with it since you will deploy it to a serverless environment (unless you use a 3rd party solution like pusher for eg).
      As for the original comment, I think that if you organize your code well with good separation of concerns, it can allow you to go very far

    • @nikolovlazar
      @nikolovlazar  6 місяців тому

      @@TianYuanEX Yep, sockets are definitely out of question in a serverless environment. But there's definitely a way to keep a good code structure and not have (major) issues!