Server actions, RSC, Prisma, and TypeScript in NextJs 13

[@demystifyingdev]

Excellent and extremely helpful (and clear!) presentation, not just because it teaches the topics covered very well, but also because, as Next.js changes, it helps set up best practices for our team!

[@hamedbahram]

Glad it was helpful! I appreciate your comment.

[@theshortsgiga]

thank you bro you saved my life with Prisma I was struggling with it for three weeks!

[@hamedbahram]

My pleasure, I'm glad it helped!

[@marcosfitzsimons]

I'm gonna keep following more of your videos! Great content sir. Thanks!

[@hamedbahram]

Awesome, thank you!

[@majlowy]

First things first, I love your videos; they provide a lot of valuable insights! Regarding the part where you mentioned returning an error inside a Client Component with the use of a Server Action, it's important to note that this can potentially result in a runtime error. Specifically, you might encounter an issue like this: "Only plain objects and a few built-ins can be passed to Client Components from Server Components. Classes or objects with null prototypes are not supported."

[@hamedbahram]

Glad to hear that! That's a good point.

[@valtism]

Thank you, this is super helpful. I don't think I'm dumb, but reading the app router docs I was not able to get server actions working, and the errors being thrown were very unhelpful. Watching you work through a real example was perfect, and very well presented.

[@hamedbahram]

I'm glad to hear that! I appreciate your comment.

[@ofwoodfalegnameria1107]

Amazing teaching skills. Tanks for the tutorial. Very, very well explained. God bless you

[@hamedbahram]

You are very welcome! Glad it was helpful. I appreciate your comment.

[@leebobtheblob87]

11:22 creating alias for path tsconfig 12:07 using prisma schema as types 21:02 todos.ts and _actions.ts : seperation

[@hamedbahram]

Thanks!

[@FarzadVav-m6i]

best my bro💕 I am proud that you are Iranian

[@hamedbahram]

Thanks man! I appreciate that.

[@yantaosong]

Cool video again, how to set the vscode font like yours.

[@hamedbahram]

Thanks! I'm using Operator mono.

[@shyamsutar4113]

NextAuth from starting to end with prisma, mongo, client server

[@hamedbahram]

Thanks for tuning in. Is that a request for a future video, Shyam?

[@shyamsutar4113]

Yes sir

[@hamedbahram]

You got it!

[@REAZNx]

Mongo? Ew

[@vojtechruzicka5670]

Hello Hamed, thank you for a great video! You instantly became my favourite creator of NextJS content. I have one (maybe stupid) question. Whats the difference between lib/todos.ts and _actions.ts? Both files have functions manipulating with our todos collection, why do we separate them? Couldn't the getTodos() function be also a server action?

[@hamedbahram]

Hello Vojtěch! No question is stupid question, you're right both sets of functions run on the server and can be combined into one. I like this pattern where your database functions are separated from the logic that executes them for example from a server action, from an API endpoint and so on...

[@vojtechruzicka5670]

@@hamedbahram Ah, that makes sense. Thanks a lot for the answer!

[@hamedbahram]

@@vojtechruzicka5670 anytime!

[@shubhamupadhyay3174]

thank you

[@hamedbahram]

You're welcome

[@sole008]

hi thanks for the video, how can i use server actions with formik ?

[@hamedbahram]

Good question! never tried that before, but I guess prevent default in your `handleSubmit` and pass your server action to the `action` prop of your form!

[@sole008]

​@@hamedbahram thank you for the answer, I will try

[@hamedbahram]

@@sole008 Anytime! let me know if that worked.

[@sole008]

@@hamedbahram although i would really appreciate a quick video on it :).

[@hamedbahram]

@@sole008 would probably do one with react-hook-forms. It'll be the same concept.

[@programmers_code5989]

Nice ❤

[@hamedbahram]

Appreciate it 👍

[@JRichens]

Is it not good practice to put disabled={isPending} on the input (tickbox) to utilise useTransition() ?

[@hamedbahram]

Absolutely!

[@victormustin2547]

How is caching handled ? I followed your pattern for my app and I find that every time i go back to a page, it fetches the data from the database agin, whil I would want that data to be cached and to be changed only when i mutate the data.

[@hamedbahram]

Well then you can remove the `export const dynamic = "force-dynamic" config, and it will cache by default. You can then use the `revalidatePath` in your server action anytime a new task is created.

[@JRichens]

Great video. Really helped me. I am 2 months into learning Web Dev and this was useful. One question: Instead of using revalidatePath to do the entire page, can we not use revalidateTag?? Thank you

[@hamedbahram]

Glad to hear that. Welcome to the fascinating world of web dev. Yes you can use `revalidateTag` if you have tagged your cached data when fetching.

[@JRichens]

@@hamedbahram Thanks for the reply. Would you consider a video or a tutorial on this? Just I am struggling to find any examples. It would be great to be able to just refresh the one Todo item and show it appended instead of the entire page! 😎😎

[@JRichens]

- Just I notice a few people have asked this problem. So a short video explaining how to just revalidate the data and not the entire page would be great!!!!

[@hamedbahram]

@@JRichens For sure, I'm working on a video which involves fetching data from a CMS and there I'll explain `revalidateTag`. I may also create a dedicated video for this. Stay tuned.

[@yasserhy]

Shouldn't the components folder be placed outside the app folder?

[@hamedbahram]

No, you can have it inside the App folder as well. It's a matter of preference.

[@yantaosong]

Hi Hamed why my updateAt not work , Attribute not known: "@updateAt".

[@hamedbahram]

Not sure 😁 compare your code to mine and see what's different. I'd look at your prisma schema first.

[@gerrcass1]

I would really like to take your course but I can't afford it right now. Thanks for sharing, great stuff 🙌

[@hamedbahram]

Thanks Gerardo, I'd be glad to help if you're keen on learning NextJs, please send me an email with your details. Cheers.

[@GabrielMartinez-ez9ue]

I seem to still be inclined in using react query for fetching as it brings a lot of goodies to the table.

[@hamedbahram]

Absolutely, that's a perfect choice. I love React query and/or SWR for client-side data fetching, caching and also mutations.

[@GabrielMartinez-ez9ue]

@@hamedbahram Can i suggest video please? There seems to be confusion when using react query with server components. Is it possible for to give your intake on the correct way to handle this when using for example: prisma, react query and next?

[@hamedbahram]

@@GabrielMartinez-ez9ue Absolutely! Thanks for the suggestion. I think that makes an interesting video. I'll work on it.

[@iakuraa]

What code font are you using?

[@hamedbahram]

Operator mono

[@dishanhewage]

Great stuff as always. Thanks. Can you do a video about structuring scalable NextJs project with the new app router when you have a moment?

[@hamedbahram]

My pleasure Dishan, thanks for tuning in. For sure, can you elaborate on what you mean by scalable project?

[@dishanhewage]

@@hamedbahram Thanks for your quick response. What I meant by scalable is organized into more modular components/services that can be easily maintained in a production-level application. The design and folder structure I found in most articles and also the ones I come up with are not easy to accommodate growth and changes. with the new 13.4 release, I'm a bit confused about where put server logic (API/server action), Helper classes, shared components, routing + intercepting routes.

[@hamedbahram]

Hmm 🤔, good question, how to organize your project in a way that makes sense and scales easily. That makes a good subject to dive deeper. I'll work on it. Thanks Dishan.

[@blazi_0]

please how can i use revalidateTag with prisma ?????????????

[@hamedbahram]

I'm not sure if you can use `revalidateTag` with prisma. that'll be useful for `fetch` function where you can pass a `tag`. You can use the `cache` function from react to wrap your prisma query and then use the `revalidatePath` instead.

[@IkraamDev]

In NextJS 13 server components is there a way for data to be revalidated and updated live on screen automatically without refreshing the page?

[@hamedbahram]

Yes you can use `revalidatePath` or `revalidateTag` function to invalidate the cache, refetch the data and update your UI without refreshing the page. You can read more here: nextjs.org/docs/app/building-your-application/data-fetching/server-actions#on-demand-revalidation

[@IkraamDev]

@@hamedbahram Can you revalidate every 10 seconds for example on an interval instead of after doing a post request for example? I want live data that updates by itself.

[@hamedbahram]

@@IkraamDev Yes you can do ISR (Incremental static regeneration) - watch this video: kzbin.info/www/bejne/hXuYeJSEi9qdl9k

[@techknowledgebase4504]

How form validate on runtime with use client? Live error show on ui

[@hamedbahram]

That's a good question. You can use Zod which works well with TypeScript. I have a video coming up showing that soon.

[@techknowledgebase4504]

@@hamedbahram Are server component support validation without js shift?

[@shadowfaxenator]

@@techknowledgebase4504 Currently you can't return Errors (or any other data) as a result of server action to a server component (only client one) so we need to wait for react team to implement useActionData hook. I's a pity that they provide an API that is not actually ready from a design point of view

[@hamedbahram]

@@shadowfaxenator Thanks for contributing Artem. You're right, server actions are still in alpha release and it'll be some time before it's fully there.

[@hamedbahram]

@@shyamsutar4113 You can still do form validation in JS

[@bbmerong]

where are todo list data?

[@hamedbahram]

We are storing our data in MongoDB (database)

[@ICOReviewtoken]

I user nextjs 13, i want to make setting for favicon, i have API to get favicon image, how should i do ? My purpose is that I want to create settings for favicon , meta description so that users can go to admin to edit and update easily depending on their brand. I need a best implementation with Nextjs 13, let's say I already have an API that returns favicon, metadescription. Thank Bro

[@hamedbahram]

There are two ways to generate metadata in NextJs 13: - config-based: add a metadata object or use the `generateMetadata` function - filed-based: add static or dynamically generated files You can read more about it here: nextjs.org/docs/app/building-your-application/optimizing/metadata Generating dynamic metadata is pretty straight forward, and for dynamic `favicon.ico` you should write files to your `/app` folder - using a server action for example. But generally speaking you shouldn't allow users to write files in your codebase. Hope this answers your question.

[@ICOReviewtoken]

@@hamedbahram thank for reply. I think i will api from backend server to allow access Role write app folder on server nextjs

[@hamedbahram]

@@ICOReviewtoken Absolutely!

[@mohdsajidshaikh4291]

Increase font size. Very difficult to read on mobile

[@hamedbahram]

Will have that in mind for next videos.

[@maverick456-33]

MongoDB Sucks for prisma.. What about adding tRPC or React-Query in your tech stack?

[@hamedbahram]

I actually like Mongo :). In terms of my stack, since we get very close to end-to-end type-safety with RSC in NextJs 13, I haven't really thought about a use case for tRPC. Also, since we're doing most of the data fetching on the server-side, there is less need for packages like `react-query` or `swr` or client-side data fetching in general.

[@yantaosong]

20:40 don't understand, form adding action, 'submit' can't clear the form , if don't have action, submit button will clear the form, like your code in video kzbin.info/www/bejne/e5mWdqOtprlnma8

[@hamedbahram]

I'm not sure if I understand the question. Can you elaborate?

[@yantaosong]

@@hamedbahram I meant " " versus " ", the latter no need to clean input , but we add the action to form we need some code to reset , such as refForm.current.reset()

[@PeterKellner99]

In my experimenting, I'm finding that I have to declare my prisma instance like: "const prisma : PrismaClient =" and not just "const prisma". Otherwise, the type inference does not work when I do my prisma calls in my components. That is, "prisma.customers.findMany()" gives me a type error because customers is not declared as a type on prisma anymore.

[@hamedbahram]

I see 🤔 that's a good point. Thanks for sharing.

[@Grishopping]

discord ???

[@hamedbahram]

Not yet :)

[@Grishopping]

@@hamedbahram OK