A guide to using Next 14 (server actions, RSC, useFormState, useFormStatus)
HTML-код
- Опубликовано: 21 окт 2024
- link to code: github.com/web...
📘 T3 Stack Tutorial: 1017897100294....
🤖 SaaS I'm Building: www.icongenera...
▶️ Generate Chapters: ytchaptersgene...
💬 Discord: / discord
🔔 Newsletter: newsletter.web...
📁 GitHub: github.com/web...
📺 Twitch: / webdevcody
🤖 Website: webdevcody.com
🐦 Twitter: / webdevcody
![Gunna - HIM ALL ALONG [Official Visualizer]](http://i.ytimg.com/vi/HiCxoDeo0hc/mqdefault.jpg)
Cody, your teaching style is truly exceptional and best of all: no unnecessary fluff. I just immersed myself in a series of your videos and gained so much valuable knowledge.
Thank you very much, and thanks YT for putting your channel on my feed! 👍
Thank you! Glad you like it
This is great, I always get overwhelmed when there is too many features being added to something I use, love seeing these videos just running over the changes
You can also skip noStore if you revalidate the path from your server action. That's incremental static regeneration.
Thanks man, you're always on time i really needed that ! plus your explanation is easy !
Saw you repost this video on Twitter, glad I bookmarked it and came back to watch it. Great stuff!
thanks man!
Fantastic video thank you! I think I'm gonna make the switch from tRPC to server actions finally
For checkboxes you could probably still use input with a button then make this button to be transparent and position it on top of a checkbox
Thanks man! I think todo app is perfect if the focus is learning these kind of features.
Just searching for drizzle and your vids showing up - uploaded 2 min ago 😂
I finally understand server actions now lol thanks dude
Excellent Video! Keep up the good work!
Cody youre the🐐This video was super helpful!
Excellent! How about using a server action to do a search based on criteria of a form, and display the returned data back to the screen? Everyone on youtube shows examples like yours (inserts or deletes) and then they display ALL the data. But I would like to see an action to do simple query (using conditions from the form).
In this case I am not sure what to do. The component containing the form will still be a server component like in this example? The results, if they are displayed in a separate component, a results component, then that results component will also be a server component? (I guess that in this case the app will look like a php app, totally) or a client component? Am I thinking to the right direction or the approach should be different? Should I return to the fetch/API/useState approach?
Thanks man...
One approach is to put your search string in the query string, and redirect when someone runs a search, then your RSC will rerun and refetch the subset of data and display it
Hey Cody, I built an app that was on the page router last year, a nice s ide project that makes abit of money with the OG page router t3 stack. Im now working on my 2nd side project, and might learn app router and drizzle orm (instead of prisma) can I ask why tRPC can still be an option even in the app router on T3? Is it only used for client side calls or is it both? Really confused but would love to know.
it's still a great option, but I personally switched to server actions instead of tRPC
Hi please i need help with this
I'm fetching data from a server component and passing it down as props to a client component but I'm getting this error "Error: Maximum call stack size exceeded" when i use the .populate on my Model.....Please what are the possible reasons for this problem?
hii, may I ask why we still need react hook form in server actions?
Super interesting thanks a lot !
Instead of encapsulating the create form into its own component, you could’ve just gave it a key unique, couldn’t you? Maybe based on the length of the todos or some fingerprinting of the set
Love you! Great job! First 👸🏿
🙌🙌🙌🙌🙌 thanks babe!
Can you please resume the react interview series, they were really fun to watch
I just published one today
@@WebDevCody yes please it very inresting and we learn a lot even help to crack interview thanks
If you wanted to use the same server action on different pages how would you revalidate path on each different page?
I wouldn't reuse server actions on other pages personally, but I guess you could pass the path as an argument and the action could just dynamically revalidate based on the passed path
Noticed that drizzle has an icon in your vscode icons, what icon extension are you using?
Bearded icons
Would people still recommend using tRPC with Next14? Loving the videos Cody!
I think they both kind of solve the same issue which is "end to end" typesafety. I have personally been leaning on server actions since they achieve it.
@@WebDevCodyhow is next.js 14 comparably type safe when you're casting the request parameters? (5:42).
@@flexdashwell, in this video I'm doing progressive enhancement to allow the app to work without javascript enabled; this requires using FormData which isn't typed. If you just invoke the server actions directly from onClick callbacks, the arguments and return values are all typed. tRPC won't work with progressive enhancement from what I understand either
When submitting a form on a client component with useFormState hook, the app undergoes a hard reload, resulting in the loss of all cached data.
Edit: I have a client component (a form) that is using useFormState hook, if fetch goes well i call revalidatePath and redirect outside of try/catch. The problem is redirect because if I remove it then it wont do a hard reload.
How can we prevent this from happening?
What cached data are you losing?
@@WebDevCody I have a tickets page where data is initially cached upon the page's first load. However, when I navigate to the create ticket page and submit the form using , I'm redirected back to the tickets page, triggering a hard reload. This hard reload results in the loss of cached data across all pages.
The documentation suggests that using a redirect in a server action is acceptable, but in practice, it isn't. To address this, I modified the create ticket form to and, within the onSubmit function, triggered an action. Upon successful completion, I utilized router.push(...)-and with this adjustment, the process now works seamlessly.
Could you do a follow video to this especially the useFormState and unit testing the component that uses it?
For someone building a new production app, would you recommend prisma or drizzle now that you have played around with them both? Would love your input on this
so far I'm liking drizzle a bit better, but they are both great IMO. drizzle is a bit lower level and requires more knowledge of how SQL works I'd say
Thank you, I really appreciate your reply @@WebDevCody ❤
what about "drizzle-kit generate"? it seems you skipped this step
Followed along integrating with my own code, then got frustrated and used your repo code directly but the form is not clearing with defaultValue={formState.text} yet the error reporting on the same return works well. running Next 14.1.1-canary.58
Sorry too hard to help debug over yt commenfs
@@WebDevCody Would not think that is possible but would like to know if you have any issues with this code on next14 Seems the defaultValue is not updating consistantly but the return value on success is
FYI
{console.log("text : " + formState.text)}
Confirms the formState.text is being updated on chrome console (tried "" and "*") but its not updating the input? @@WebDevCody
formstate and formstatus are expiremental hooks in react, right?
Canary yes
So what if i want to the display a toast after creating a todo?
What are the use cases for people using a browser with disabled javascript?
People on slower machines who don’t want pop ups and modals as they browse. Progressive enhancement is also to help allow interactivity when the JavaScript hasn’t loaded yet. For example, clicking on a button before react initializes will cause the button to do nothing.
thanks
6:19 - is something similar happening when using Prisma? And how could I resolve it, when using Prisma instead of Drizzle? I would be so thankful.
Edit: Same code for those working with Prisma:
import { PrismaClient } from "@prisma/client";
import { env } from "~/env.mjs"; // or use node's process.env instead
const globalForPrisma = globalThis as unknown as {
prisma: PrismaClient | undefined;
};
export const db =
globalForPrisma.prisma ??
new PrismaClient({
log:
env.NODE_ENV === "development" ? ["query", "error", "warn"] : ["error"],
});
if (env.NODE_ENV !== "production") globalForPrisma.prisma = db;
yes, I do think you need similar code for Prisma to prevent too many connections
@@WebDevCody Found in T3 stack an example, I didn't know about it until now, that it's needed. Many thanks!!
This is pretty much like Remix with extra steps
Great
can you share the code with us please?
yes sorry: github.com/webdevcody/todo-drizzle
Com on man. This is so no makes sense staff. Soo many abstractions that is not really fun to write. Code makes no sense to read and write. I want to clearly see the boundary between client and server, where my traffic falls out and comes in. Pretty useful nextjs for the frontend and RSC is great for dynamic and static generation. I prefer having separate http api server over. Had no chance to use server actions. After watching the video had no excitement for trying it, the video is the great though, clear explanations.
I really enjoy server actions personally. Much better DX than hitting api endpoints directly
Please provide time stamps for a 31 minute video
If it's a beginner's guide, then why are you using Drizzle and Docker n all? Some of us, including me, don't know all that stuff. You should only teach NextJS 14 and the rest of the stuff that you have included in the title, which I know you will do in the video. but I am saying this should only be a next-step guide.
Good point
Disagree. Docker has nothing to do with nextjs itself... its just a way to "run" your application.. you can run any other framework on docker...... same with drizzle. His video was veryyy good for nextjs 14. I would ARGUE that him introducing those other "technologies" would help the beginner question it and do some more research and self learning (the whole point of development! Its always evolving)
what? Truly skill issue. Come back once you’ve learnt. Don’t expect to be spoon fed
@@real23lions I never said I want to be spoon fed? I specifically said "self learning"
@@lisander-lopez oops i meant to reply to OP, not you. my bad. i just edited it
actions.ts is that right? or tsx is just fine
It’s possible to return a jsx component from a server action, so tsx if needed