Prisma in Next.js - My Fav Way to Work with Databases (CRUD, Dev/Prod Workflow, Relations, Indexes)

if you watch my channel you know I like using Prisma so I thought Prisma deserves its own video and specifically we're going to look at how to use Prisma in next J as the latest app router so how to use Prisma in server components server actions but also in middleware for example which runs on the edge as it's called we'll talk all about what that is serverless and Edge functions I'll explain what those are so we'll take a look at all of the Prisma main features including a typical developer workflow right so in development and then going to production how does it actually work in practice how do you do migrations for example don't worry if you don't even know what it is Prisma works with most of the popular databases so like postgress MySQL SQL light but also for example mongod DB now when I say Prisma Prisma actually is multiple things right so Prisma has an OM which is what we will actually use in our code this is also what will actually create the the underlying sequel for example so this video is going to be mostly focused on the Prisma omm but Prisma as a company also offers accelerate and pulse I'll take a look at those a little bit later so I highly recommend that you watch the video in full if you're adding a database to your nextjs app and of course today's sponsor is actually Prisma now to understand where the Prisma omm fits in in a nextjs context we have to zoom out a little bit so in a nextjs app we have both a client sign as well as a server size and actually I would say it's it's a much more server focused framework than a client focused framework right so if you're coming from the react feed world for example where pretty much everything is client side it takes some time to get used to next JS because the server side carries a lot of weight but this entire thing is essentially one nextjs app right but right now it doesn't have a database let's say we create a database somewhere somewhere in the world and we need to access that from our nextjs app so that's going to be from your server side we could do it directly right so we could technically directly interface with our database however in practice we actually tend to prefer using an orm like Prisma it simplifies many things and overall is a better developer experience so that's where the Prisma RM fits in into the overall architecture so let's actually walk through a simple practical example and I'll show you all of the main features let's say that we have a Blog and I just have a homepage right here welcome to my blog and I have a link to the SL poost route let's actually go there and let me actually show you the URL here as well so when we go to SL posts the way it works in the app router is that it's going to look for a page that matches that path right so here in the app rouder you create a folder so posts that would be part of the posts URL and then this page is matched with that so this page is now served here in the browser and what we have right here is just an H1 as well I just hardcoded the number zero and here I have a UR a list it's currently empty here I would like to display a list of the post but I have no posts yet so let's actually add a database and set up the Prisma omm so that we can actually create some posts into a database and then read those posts into our app for this tutorial I will use SQL light in development and post grass in production we're going to use sqlite in development cuz it just makes things a little bit easier here but if you want you can set up a postgress locally as well with for example Docker and follow along as well that being said Prisma has a very handy quick start which also helps you set up a sqlite database so we can essentially do anything with our database through Prisma all right so then here they talk about setting up a typescript project now when you create a next JS app with create next app that is already a typescript project right so we already have typescript installed here as well as part of the dependencies if you take a look here you can see we have tab script here already right so this is all just a standard simple next as boil plate that you get from create next app that we all so often do right so we already have this so if we go down a little bit what we don't have yet is this Prisma CLI so we're going to run some commands I'm opening up my terminal here and let me actually open up another one here we're going to run some Prisma commands so what we're going to do is MPX Prisma now it's a good idea to keep using the same version for this Prisma uh command so we're actually going to install that in before we even do any of that so we're going to say mpm install Prisma and we're going to save it as a def dependency going to install that all right so now we can initialize Prisma so now we're going to say MPX so basically we want to run Prisma and what specifically do we want to do well we want to initialize here and by default it will assume that you have a postgress database we'll take a look at that a bit later here we actually want to start off with a SQL light database it's just a little bit easier in development so you can also specify that here we can we can say the source of the data data source provider is going to be SQL light in our case press enter there okay so let's actually see what that gave us so now I have a Prisma folder here and here I have a schema. Prisma and so this is essentially where we have all the configuration for Prisma but also we're going to describe here how our actual database should look like like what tables or collections if you're using mongodb so we see generat a client here the Prisma client is what we use to actually work with in our code as we'll see in a second and that's it will also use the type it will create the actual underlying SQL queries will see that in a second and then here we have information about our data source so we said we want to have a SQL light database Prisma needs to know where it is it needs to way to connect to that well the URL for the database well we put it in an environment variable called database URL now we did not Define this environment variable but what Prisma also did as part of the initialization is create aemv file in case you didn't have it yet and if you open it up you can see that Prisma has already added this environment variable for me now it's SQL l so it's just going to be a file part of our file system right so that's where it put that environment variable now in nextjs we often use a different convention for environment variables we use EMV local if you actually have a secret if you want to use the environment variable as part of. local you cannot just copy and paste it in a different file that it's not going to work like that brma does Give an example in their documentation on how to use the EMV package to load it from a different file in case you want to do that all right so for this tutorial I'll stick to this now if you store secrets in here you probably do want to add it to the get ignore file so in the latest nextjs it should automatically add EMV but you want to double check that right so here for me it's a great out so if I push to GitHub it won't be in there all right so let's talk a little bit more about that schema this is where you're going to work with Prisma most of the time so we already saw the client and this data source now we want to describe how our database should look like so we have tables in the world of SQL so let's say in an application like this we want to have a table for all the post right so you would say model post and you can see it's pretty common so I get a nice suggestion here from get up co-pilot but let me actually write that out so we want each post to have an ID so you say ID and then the data type so could be an integer could be a string right for example we can say it should be an integer and we can tell Prisma hey this field is actually going to be the ID it has some special behavior it should be unique and things like that and we can also give it a default value so you use these add symbols we can say by default it should just Auto increment for example right so this is going to be 1 2 3 as the ID in your database this is the simplest one now the downside of this one is that if you use the ID in your application then your users May kind of figure out information about your application right so if you use it in a URL for example they may just change the number three with number four and so it's more likely that they gain insights from how your app is working there's also uu ID which is more complex and also a more Collision resistant version of that and let's actually use that and in that case it will actually become a string and let's say each post should also have a title right that should just be a string now when I save here watch what happens it automatically formats this file for me this will not work out of the box right so to make this work you want to do two things you want to go to your extensions and here I installed the Prisma extension right so here I have an extension Prisma I installed this so I think this is a must have and the second thing you want to do is you want to format things when you actually save the files so for me on Mac it's going to be command s that also does not work out of the box so if I you need to enable it in settings so if I say uh command shift p or on Windows it's going to be control shift p i want to open up my user settings here and here I have an entry here for Prisma right so square brackets Prisma and I'm saying here the default formatter should be Prisma Prisma here I already have editor format on Save is true for all my files in vs code but if that doesn't work you may actually also want to try adding it directly to here as well okay but for me it's working so I'll leave it like this what else should a post have well probably also actual text and some actual content right so here we can say content should also be a string so these are all strings we already saw an example of integer right an integer is just a number like 0 1 2 3 without decimals essentially we also have booleans here right so for example is this post already published right so here we can say Boolean and by default we can say false right now if we to create a new post we have to specify title and content if you add a default value at default it's optional if you want to make sure it's always optional regardless of if it has a default value or not you can also add a question mark there are two other fields you also often want to add so for a post we probably also want to keep track of when it was updated right so here updated ad is going to be some date time and actually what we can do here there is a special option for this as well is ADD updated so now press my nose Whenever there is a relevant change it should also update this field with the latest time all right and often also we want to keep track of when it was actually created in the first place in the database right so here we'll just say the default and I should just take the time at the moment of creation so because we annotated these like this we also do not have to specify any value when we create it so the actual mandatory values that we should specify are just title and content so we are writing this from scratch now if you already have a database and you want to use Prisma you can also introspect as it's called so Prisma also allows you to just connect the Prisma Oram to your database and then it will generate the schema for you from what's already inside the database before I show you some more advanced features we can add here as well let's actually try creating our database we don't even have a database right now remember the Prisma orm is not our database it's just sitting in between our database and our application right the orm helps us interface with our database but our database right now does not exist so I'm going to open up my terminal here and what you often want to do in the beginning stages of a project and you're quickly prototyping your schema because in the beginning you don't really know yet what the actual model should be right so here I typed it out because I prepared the video but in the real world of course you don't really know what you're doing in the beginning right should published should it be mandatory or should it be optional you don't know yet so in the beginning a command that you're often going to use is the following so here whenever you change the schema in the beginning you may want to run MPX Prisma DB push so it will sort of push the changes that you made in your schema to the actual database now here we don't have a database yet so if it's the first time it will actually create a database for us so if I say is if I press enter here you can see a bunch of things are happening because it does multiple tasks if I scroll up here a little bit you can see it's reading the environment variables okay the first thing it actually does here is create our SQL light database so where is the database well it's actually right here right so a sqlite database is essentially part of your file system but which makes it very easy to work with and we don't see any data in here we'll we'll have a different wave Prisma and it does some other things as well so here it also says your database is now in sync with your Prisma schema so what it actually also did is make sure that in the database we actually have a table for posts okay and then what it also did here is running generate so basically what it will do is it will take the post and it will generate a so-called client for us so if you've ever seen Prisma before so for example here in our page what we what we are going to do in a second is we're going to do something like Prisma dopost find many right so this is the Prisma client and right now we haven't instantiated the Prisma client yet but the Prisma client but the Prisma client will be able to give us suggestions here it will know that we have posts in our database because that client has been generated based on what we have here in the schema that's what generating means and to do that it did need to install one more package which it automatically did for us which is the if we scroll up here the Prisma client package right so we don't have to install this separately you could install this yourself manually but it will also be installed the first time uh DB push and I just said that it made sure to also create a table for post in our database but if I click here I can't actually see that so how can I even see what's in my database well Prisma helps you out with that as well so there's another command we can run here we can say MPX Prisma studio so if I press enter here it will actually open up a UI here that will show what's in the database so let me close this so what we see here is that we have one model this is going to be a table but it's currently empty right so there are no posts here right so if I click here it will say there are no rows in this table right because we haven't created anything yet but we can already see the columns here right so those columns are what we just specified here in the schema right so all of this is now a column right so we have ID title content so here's where we're going to have all of our post and then here in our application on/ posts we would like to show all of the posts in our database so how about we actually add one post here just some dummy data here we'll talk about seeding a database a little in a second but we can all we can already manually quickly add one here so we can click on ADD record and remember these are the only two fields that we actually have to fill out here all the other ones already have default values or are already taken care of by the Prisma Oram or the database so what we just have to add here is a title so we can just say first and the content the actual body of that post will be this is a wonderful okay I'm going to press save change and now you can see we have an ID and all the other ones are filled out as well and actually I maybe made a mistake here for Content I will fill it out again this is a wonderful post I will save this one change okay so now if I refresh yeah we have this one row so we have one post now in our datab how do we actually show that here on the page in our application right so the page here what we have if we take a look if I close this and if I open up the page here for SL poost which is this one here I just have that H1 and I have have that list which is currently empty so how do we get the post from our database or just the one post that we have how do we get that right here and actually where do we even get data in the latest nextjs app router right so if I go back to this overview one more time where do we actually even get data so traditionally maybe you had an API endpoint perhaps and then from the client you would make a fetch call to SL API SL posts right something like that right so in past on the client you would do something like use fact right and in here you would make some API call to your back end so this is what you would do on the front end so then on the back end on your server you have to make sure you actually exposed an API endpoint like this and make sure to connect it properly right so make sure you have to correct URL and wire it up properly so actually quite cumbersome but this is what you would do in for example a react V application now we are working in nextjs and the cool thing is in nextjs you can fetch data without use effect you don't even have to create a separate AP endpoint you typically don't do it in the route Handler the the place to fetch data or to get data in an xjs application is actually in the server component and so let me actually add that here so for what I call the get request whether it's with the fetch API or with your omm right we're using the Prisma omm in this case to get data this is essentially the place to do it and actually you can see I already marked this as async because what I can do here I can just say oh wait and then here I want to use my Prisma omm to find all the post right so we'll talk about all the options you have to actually query data with Prisma but this is what it will look like to get all of them and this will give me all the posts in my database and then I can take those posts and I can just map over them right here and so this is a server component right so here I can map over all the post and let's actually see what markup we want to render here so we want to have an Li for each one okay Li let me just tap through here right welcome to the age of AI programming I get a bunch of things here that I don't want but I will keep the Li and we want want to link to each post as well so we can actually view the content right very standard blog type of setup so I will actually use the buildin next link component here and I will actually tap through here very quickly the link component will actually already render an anchor tag for me so we don't need this one and let me actually import this and I'm missing a parenthesis here okay so here I'm mapping over now when I save here we're going to get an error because Prisma the variable here is not defined yet we have not instantiated the Prisma client here now very important Prisma has some nextjs specific documentation so for example they will show you the best practice for instantiating the Prisma client in nextjs so if you don't do it the way they recommend you may run into an issue right so here they explain as you save your files it may create another connection to the database every time you save so here they have a code snippet that I pretty much always use whenever I use Prisma I just go to this page you can just Google something like instantiate Prisma in xjs and you will find this article and I just copy this code snippet to instantiate that client right so what I like to do is I like to create a separate uh folder actually so let's see I will do it as part of this Source here not as app not part of the app but just a source I will create a lip folder here and then I like to just create a db. TS file right here and then here I will just paste that code snippet right so here what it's doing is essentially importing the client from that package that was already installed for us and then it just instantiated right here so here we have that single we don't really need to understand the exact details of this here you can see that we're assigning that here to a variable called Prisma and that is what we're exporting here and then here it's actually putting Prisma on the global object so the next time that this file runs it's already here on that global object so it will not instantiated again right so basically making sure that whenever we use Prisma it's not instantiated over and over again right so now I do need to import this so now my auto suggestions here should work yeah so here we see a suggestion here from lip DB right so make sure you import it from the right path okay so now let's actually see what get if I save here this all of this should work now so if I now go back here we can see I have first post here right so I added a border on the top and bottom as well but you can see now this is a very simple example of how we can interact with our database right so pretty cool that we don't need use effect or something like this we can do it directly in a server component this will run only on the server so we're not exposing Prisma here to the client or something like that this will run only on the server and the render result of this will be sent to the client and that's why we can still see a server component in the browser right so you don't need to create an API route Handler this is the more idiomatic way of getting data in the nextjs app router so here I'm using the find many query but if we look here the Prisma Oram also offers find First and find unique so one use case for for example find unique would be the following when I click on first post we are going to slash and then the ID of the post right that's what we specified here here for the link we have SL post and then we have the ID of the post so here we have SL poost and then the ID now we don't have a page file matching this route yet so if we want to have the actual content of the post that has this ID how do we do that very standard example but how do you do that in the nextjs app router so this part of the route can be a different ID right so this is a dynamic route as it's called so it's still sitting in SL posts right so here in SL poost we need to create another folder here and here I'm using square brackets because it's going to be dynamic now I can call it whatever I want but it makes sense to Simply call this ID and then here we have another page. TSX file which will be served when the URL matches this route so then here if I just copy the entire page component from here I can just paste this one and here it's just going to be post singular page we want to have some different markup right so here what I want is the following I just want to have an H1 with the title of the post and then the actual content of the post right so here I will get an error because well I need to import the Prisma client which is still going to be that same Prisma uh instance and now I'm still getting all of the posts here well that's not what we want here we only want to get one post and it should be the post has the ID that's in the URL so how do we even get this ID from the URL in nextjs well since we specify to nextjs with square brackets that's going to be a dynamic URL this going to be a dynamic route we can get it here in props it's called a Pam right so here we have pams in this case we only have one Pam I will ignore the type for now so pams here will have the ID so here now we can use another query here we can say find uh unique so here we can say we can open this up and we can say where the ID where the ID is the ID from the URL that's what we get here now what you get from the URL is going to be a string and my co-pilot actually wants to convert this into a number if we hover this you can see it should actually be a string so copilot was not helping me here but it does show here that the Prisma Oram is type save right so if you have the wrong type you will get a warning so now I can fix my mistake and now have the correct type so now it should be able to get it from the URL grab the correct post from the database and that's what we should be able to display here so let me actually see oh yeah so now if I save here you can see we have our post right here the title and then the actual body from the post so what we are rendering here essentially is based on what's in the URL right so very often actually you want to put information in the URL there are many benefits to that let say somebody can just copy this send it over to somebody else they can just paste that URL and when they press enter they will see the exact same also a user can bookmark this right the URL will be stored and then later when they come back we are rendering the exact same now here we are using the ID and technically it works but in practice we do want to have nice looking URLs so we may actually prefer to put the the title in the URL L right so instead of linking the ID right so if I close this so here on the post page here in the actual link here we are using posted ID it would be nicer to have like the title in there now if I do it like that if I now click here you can see we get some strange formatting issue here because first post the title of that post has a space in there so we would like to have like a dash in between and some other formatting as well so typically what people do is they create a separate field for that so if we go to our schema here so each post not only has a title but we also want to have a sort of different version of the title that is appropriate for a URL so that is often called a slug and that should also be string it's very similar to the title but it's going to be more appropriate for a URL okay so I just changed my schema I want every post to have a slug as well I just changed the schema for the Prisma omm but my actual database if I refresh here does not have a slug column here yet right so this this post here does not have that yet now I changed the schema I need to update the actual database again so if I open up my terminal here and I will open up another one I will keep the studio running we're going to run the same command as before right so here we again have MPX Prisma DB push if I now press enter here some of the data may have to be removed in order to make this work and now when I go back here and actually I do need to refresh here and go back uh here you can see see that now I also have all the data is gone but now I also have slug as a column if you don't see that after doing that by the way you may need to restart Prisma studio right I find sometimes you have to restart it it's okay so sometimes the data will be lost let's quickly add it back here I will say my first post and now for the actual slug what I actually want to use in the URL would be for example lowercase with a dash in between then the actual content here wonderful okay I'm going to press save changes and again I had and actually I do need to do that again for the content that's okay wonderful post press enter save change okay so now I have repopulated my database now if I go to slash poost okay I refresh here and I still see my post here also sometimes you do have to restart the dev server as well right so if you see some weird error just try restarting okay so here we are still getting all of the data from our database right that's what we're doing right here and now we are still linking based on the title right so now we do want to make it that slug so if I save here and now if I click here you can see we get a pretty URL here now based on the slug we now want to render this right so now if we go back to that page one more time here we get we are getting the pams and here we are still using ID so it's not going to find a post right now so here I do need to change this to slug right so ID should become Slug and actually here in the folder name I called it ID so if you want to get anything from the URL you need to use the name that you gave here which is still ID so we also need to change this to slug update Imports yes okay um I will save here all right so now there is one issue with Prisma because we are using find unique so you need to query by something that is actually guaranteed to be unique and if I open up the schema here the only thing here that that will be unique is actually the ID because we annotated here with at ID which by definition will be unique but everything else we have not specified that it's going to be unique so technically the Prisma RM is telling us hey you are using find unique and you're trying to find the post by slug but a slug is not unique here so technically from prisma's point of view there could be multiple rows in our database here that have the same Slug and I could create another row here with the same slug so therefore it's not guaranteed to be unique so you cannot query by find unique so here what you also want to add here is ADD unique which makes sense for a slug because we don't want to be able to render multiple different posts based on the slug we always want to have one post have a unique slug right so now if I save here I just includeed at unique here but when I use the Prisma client here I still get a warning here so the Prisma client is not immediately updated when you change the schema right so when you change the schema not only do you want to update your actual database you also want to update the Prisma client so that it has the correct types and other Behavior as well so that's why we're running this command every time so now I'm going to run it again right Prisma DB push will update the actual database but also the Prisma client and sometimes it will lose the data okay so I just pressed yes so it updated the database and then also generated the Prisma client so now if I go back here you can see the red quickly is gone okay now if I go to my database here the data is actually still here this time if I now refresh here I may need to restart the def server so let me restart here mpm runev if I now refresh here we can see our post back again now this looks a little bit better now there are many other options we have here so for example maybe a combination of these fields should be unique for example the title and content together should be unique and so then you have two at symbols there is also at map so this is actually creating camel case columns in our database if you want a different name for that snake case you can map it so then in our code we still use a camel case like this but in the actual database you will have snake case and same for the name of the table in your database maybe we want to give that a specific name as well you can use two ads and we can also create an index if you create an index it can improve the read performance so if you if you are often getting data by slug for example you want that to be as fast as possible it may help to create an index in case you have a lot of reads right querying by slug but not lots of updates okay so those are essentially the very Basics now here on this this page where we are getting all of the posts from our database right so here we have find many this is just blindly getting all of the posts right let's actually add one more uh post here here I'm manually adding it here we'll talk about how to insert data with the Prisma client in a second I can say second post going to be second- post I press enter there and then I save now we have two po now if I refresh here we see two post so it just blindly gets all of the data now we can be much more specific of course here with where we can filter that's so maybe not get all of them but only where some something is true right so maybe what co-pilot wants to do here is published where publish is true that makes sense actually but they are both false right so actually the default value is false so now we don't see anything right so now we're filtering all of them out right or maybe we want to have only the post well maybe something about their title so we can say title and then something specific well they should have a title okay but maybe but also other things like contains right so only the titles that contain first let's say and so if I save here you can see I now only get that one post that has first in the name right so you can get very granular here so we have contains we also have things like greater than or less than or maybe it should the title should end with something right so only the ones that actually end with post if I save here they are both ending with post so with where you can filter so you only get the specific data that you want now what if we want to specify the order in which which we want them so here after we filtered the data that we want and so now we know the set of posts that we want we can also specify other things about that about that resulting uh set of posts so we can say they should be ordered in a specific way right so we can use the create at field and we can say descending right so now you can see the order is switched the way that we're getting the data from our database right now means we're getting all of their data essentially so also their ID but also their created ad uh updated ad if you want to be a little more specific you can also say select we only want to get there all ID title and slug let's say so if I save here it still works the same because we are only using title and slug here this can be useful for example if you are actually getting a user from a database a user may have a password in the database and you don't really want to get the password out of the database you are only interested in other data that the user has for example their email right so then this is very helpful because now we would not get the password out the database it's a little bit saf right but let me do it like this we have a couple more options here mostly interesting for pagination right so right now we're getting all of them but maybe we only want one right so we can just say take uh one if I save here we only get one we can even say skip the first one right so we're taking one but we're also skipping the first one so now I get the other one again these are mostly interesting for pagination right so just as an example I hardcoded the number zero here but I would like to show how many posts I have in my database and let me actually remove this so we have two posts I would like to show two here how can I do that well the easiest way here would be to just take posts it's just a JavaScript variable and you probably know that we can just it's just an array and we can do do length on there right so it will show that there are actually two here and this works because we are actually getting all of the posts from our database right so we can just do posts. link now what if we have thousands of posts in that case we don't want to get all of them in that case you're going to have pages right and you're going to have 10 posts per page so in that case you're going to use take and for example Skip and so if we are on the second page and each page has 10 well we want we want to take 10 but we also want to skip the first 10 right something like that in that case this query will only give you 10 right so then we would show 10 here but we actually have thousands in our database right and about pagination actually they have a wonderful guide here on the website right so you can do so-called offset pagination which is what I'm showing you here but they also have cursor based um pagination right so this is a great article I recommend you check it out now here if I want to show how many posts there are in my database here we cannot just do post. length right because here we are only getting well 10 right so the query here will give you 10 post so if you use this variable you're just going to get 10 even though there are thousands of post in our database but we're just loading them 10 at a time so in that case you cannot use posts. length right so very commonly you want to get the count so here we can actually get the count with another query which is Prisma post the name of your model right this is all type save here you can see post if I mistype here Prisma will warn me and the Prisma client is all based on what you specify in in the schema when you run a command like DB push it will sort of build that into a client the types so then if we make a mistake we get a warning but we can also use do count and it will give you the total amount of posts in there I can just then I can just use that variable to show how many there are right so now we only have two right so I do need to remove these if I want to see them right but now uh that works as well right so when you're getting data these are essentially the options you have let me actually remove them and let's talk about updating data these are what you call the reads right reading data from your database now let's talk about writ to your database right so creating new posts updating them deleting them the data mutations fancy words and basically you have reads right reading data which what we're doing here also when I click on the second post here in the other page we are also reading data from our database based on the slug right this is all reading and these are essentially the main options that you're going to use but let's say we just blindly want to get all of them from our database and I will just use length this is what we have now let's talk about writing data actually inserting data into our database we were doing it manually here in Prisma Studio how do we do it programmatically with the Prisma client so let's actually add a form let's actually do it right here in the same page to to uh keep it simple so just added this form if I save here you will see it on the page here so we just added a simple form here just form tag with an input I gave it a type of text and a name of title and that's what we see here and then we have this text area for multiple lines it's maybe the tag you want to use and this is for the actual content and then here I have my button right create post so if I say third post here great blog post once again so if I click on create post here we would like to insert it into our database right so how do we do that now traditionally what you would do perhaps is you would do something like onsubmit and then you have a function here and then again you would do some kind of fetch call to let's say API post now in this case it would be a post method right and then you would grab the form data and send it as part of the body right Json stringify it and send it as part of the body right so it would be something like this and then on the back end you had to make sure that you were actually exposing an API endpoint and then you had to make sure that you have the correct URL actually properly wir that up it was always a little bit messy to make that work luckily these days in nextjs there is a better way actually it's to do it with a so-called server action so we can remove all of this instead of onsubmit we can use the action attribute actually and here we can specify a so-called server action so if we go back to the overview one more time we saw that in in the nexts app router to get data we can do it in Sero component now to actually update data creating updating and also deleting the idiomatic way is actually to do it in a in a server action so let me actually write that here as well right so your traditional post boot delete requests we can do that with a server action right we don't need to create an API endpoint and use route handlers we we simply don't use them as often anymore as before the typical use case for these actually is actually web hooks I find and there are some other use cases for them but mostly we use server components for getting data and server actions for data mutations right so here in this case we want to create something that would be your traditional post request so how do we do that here how do we create a server action so an action is just a function actually so a server action is just a function that runs only on the server I could technically Define it here but since these are pretty important I actually like to create a separate file for them so here as well I will create a separate folder called actions and here I can create a file actions. TS now here here I do need to add use server at the top this will make all the functions in here server actions and then it's just a normal JavaScript function essentially that I can export from here so here what we want to do is we want to do here we want to create a post so in here we can then use Prisma to actually create a post right so I get some nice auto complete here let's see what we get so this looks about right so this time we use Prisma post and now not find we actually want to create a new one most important part here is to specify the actual data right so here we actually have data and then here well all of the required Fields right so all of the fields here that are not optional that are actually mandatory required is what we need to specify here right so if I actually use autocomplete here you can see we get since the Prisma client has all of these types we can see the suggestions here right so we can see content Slug and title are all mandatory so we have title and yeah actually what should the title be well that's whatever is part of this form so how do we get access to the form data here here well if we actually specify that function here so create post I need to import it right so I'm importing it from that file and now react and nextjs we'll make sure that when this form is submitted the form data is actually sent from the browser to This Server action right so I get that form data right here actually right so here it's going to be a type form data so then here I can use form data. getet and here I need to get it by the same name that you specify here for name in the form I'm cheating a little bit here with the types because technically form data doget has a special type here for form data entry value and could also be null in the real world you do want to add some ass validation here which will also get you the correct types here but let's cheat a little bit here so we have a title and we also have a slug which is essentially going to be a derivative of the title so here what I'm going to do is just take the title and I'm going to replace the spaces with a dash and also lowercase everything and then here we have the content and these are the only three we need to specify you can see the red squiggling line is gone now if I make a mistake again I get a warning here right so this is all type save right so now if I submit the form all of the data here should arrive at the server side and here I'm inserting it here with Prisma so let's actually see if that works I'm going to click on create post okay so now you can see the form gets reset and now I want to see in my database if that was actually added so let's actually refresh here and you can see we have an entry here for the post I just submitted without creating a whole API endpoint and wiring that up I can just do it with a server action it's essentially just a JavaScript function it runs only on the server and so reacting nextjs they sort of automatically generate an API endpoint for me and they wire it up for me so I think this is actually really Innovative a lot of people talk about server components as the big innovation but I think these server actions are actually the biggest Innovation so now here if I refresh if we take a look if I refresh here this code will run again it will just find all of them again so if I just refresh here yeah we indeed see the third post here if I click it you can see it's all working perfectly fine right so this was a server action for creating a post now you can imagine that we would also want to edit a post right so updating in with the Prisma omm so we can have something like edit post and here we would receive again the form there would be some form right and you also need to specify which post you want to change we could do it by ID or by slug or something like that now for the Prisma code here it's it's just the update method here so we do need to specify which one we want to update now here it has to be a string actually right so here will be a string and then again the actual data right very similar actually all right and we can also have one for deleting a post right so we need to specify which one by ID or maybe by Slug and then we can say this post should be deleted right just one line here right we're not going to implement it here but I will leave it like that these are the main ways of doing wres with the Prisma omm in the latest nextjs app router now one pretty cool thing I also want to show you here if I go back to my list of posts here so here we just saw when I submit this form if I just do fourth Post Number Four you saw that when I pressed create post I had to manually refresh to get the latest data right so I had to manually refresh so it could run all of this again and actually get the latest ones now there is something else you can do in nextjs which is here in a server action for example you can also call revalidate Path so here you can essentially say I want to render SL poost so when it does that it should pick up on the new Post in the database and it will actually do that as part of the same request response cycle as when the data actually was sent to the server side if I now create post if I just press enter here you can see I don't even have to manually refresh but the view is automatically updated for me I think that's pretty cool as well so now now we've covered reading and writing with the Prisma Oram in the latest nextjs app router all right so let me actually close out of all of this here and let's talk a little bit more about relations or relationships between your models so here right now we only have posts but of course a more realistic example would be that you also have users for example right so here you can simply create another model so a user also needs an ID we also want to give them a unique email and their hashed password let's say okay so right now they are existing independently of each other but of course we can imagine that a user can have certain posts and we want to associate them together so how do you create these relations with Prisma so there are essentially three different relations that you could have so a very common one is a on to many relationship so a user can have many posts but every post individually can only belong to one specific user and that's a one too many relationship here so we can say a user also has post and what is that a string no it's actually well an array cuz it's multiple and not string or something like that it's actually post right so it's an array of that if I save here you can see there is actually some well almost magic which is that the other part that we need to specify here has automatically been generated for me by Prisma as well so here for the Post we also need to specify that there is a user that this post is connected to and we don't want to make it optional actually so we want to make it mandatory so here we have user now I actually like author more let's actually call it author we can call it author ID and then here we need we need to make an author ID as well here this author will not actually become a column in the database so this is just for Prisma so the way to read this is that the author ID field references the ID field on the user model right so whatever ID is here that is sort of pointing to this ID right so like a foreign key in the world of sequel so that's a one to many relation so another type of relationship is a many to many relation sh so a user may have a lot of posts an array of posts but one post May belong to multiple users right you can imagine that multiple users can collaborate on one post so a single post should be associated with multiple different users so what you can do is we want to have multiple authors Associated here and I don't even need to specify anything else like that I can actually just leave it like this and this is an implicit many to many relationships so Prisma behind the scenes will understand what's going on here and the other option is if you have a one to one relationship a user can only have one post so not an array but only one and one post can only be associated with one other user so in that case we can make this unique the author ID unique and here we make this optional so user can have zero or one post right let's make it post and a post can only be associated with one unique author ID now in this specific context I think a one to many is more realistic so a user can have multiple post post right so an array of them and here we can just leave it like this and I actually do like if the updated as and created at are at the bottom so I will move this up a little bit the order here doesn't matter you may actually also prefer putting the relations even higher but I will leave it like this all right so now we have changed our schema but if we go to our database if we refresh or just browse around you won't see that reflected here yet because remember we have to update our database so we can say MPX Prisma DB push and while also update the Prisma client okay we may lose some data okay let's see what we have if I now refresh I may need to restart the Prisma Studio MPX Prisma Studio yeah so now here we have two models here post and user and actually we have lost all the data we'll talk about seaing in a second so let's quickly add some data manually one last time so actually let's start with the user here so we only have to specify a user let's say John gmail.com and John has some hashed password okay and John currently has zero post okay I'm going to save the change here so now we have one user now if we go to if I refresh here we have one now if I go to post here let's add one post as well I'll say first post first Das post for the slug the content is a wonderful blog post okay now one last thing now is we need to associate this post with a user right so you can see here author and author ID are expected I can click actually here and I can pick with us right so this is the one that we want I press enter here you can see the author ID gets filled out for me as well now we can save the changes so now we have some data again now if I try all right so I'm getting an error so sometimes you may actually need to restart the dev server I find I'm just restarted the dev server NAA refresh we see our post okay and what are we doing in that page it's just getting all of the posts actually let's see SL poost we just have that one query from before right post at find many so just getting all of them now that we have a relationship some of your queries may actually look a little bit different so here we are still getting all of the post so here all the posts we still have it right here but what if I now want to have only the posts of a user right so here I could query my user where email is John gmail.com maybe I only want to display the posts of John so here this will give me the user and actually it will get an interesting error here so it says property user does not exist so the Prisma client thinks there is no user yet even though here in the schema we know that there is a user here so I'm going to make sure it's properly updated so I'm going to say DB push one more time okay it generated the Prisma client again and now actually the error is gone so that looks all right so we know that a user can have posts right so a user here can have post but if you query the user like this it does not automatically include the posts right so here if you do user. poost if we do this and here I do need to start the dev server again it will say post is not defined so here we you need to explicitly include the actual relation you could say so if I do this and actually here I can also make it user. post so now you can see I'm getting only the posts from a particular user but you need to be explicit about that now when I create a new post let's see how that would work so here I still have a form and it will still be submitted to that server action but you can see here we're already get a typescript issue because now the schema has changed so when you create a post a post needs to be connected to a particular user that's how we have defined things here post needs to have some author ID so here you say author when you create the post we need to connect it to some user so we can say connect this is for writing and then we can say which user well the user with email John gmail.com so now if I say second post create a post okay so that all looks good you can see this one has been created right so that's connect and that's also include here here we still have our PR quickly line by the way because it's possible that we're not going to get any user from our database right so here I actually may want to deal with a if not found a case here or just do optional chaining here okay so let me actually clean up a little bit here and let's actually start talking about seeding your database right so so far we've been adding a lot of manual data here initially but there is a more efficient way of doing that so it's actually with a seed script so I'm going to delete all of this data here and actually I may need to do it in particular order because they are connected so let me delete this as well the post first and then the user all right so now our database is empty again but you can imagine during development you're going to make a lot of mistakes you're going to change your database and as we saw when you update your schema sometimes you're going to lose the data so it's very cumbersome if you have to manually add data all the time so Prisma also helps you out with seeding your database as it's called so basically you're just going to run a script that will just insert a bunch of dummy data right so I actually like Googling this article as well because it has some handy things that we can copy so if you scroll down a little bit here here they give you an example of a seed script I'm going to copy the entire script here and what you can do is in the Prisma folder we can create a file called seed. TS I'm going to paste that right here here it's actually instantiating the Prisma client because we're going to run this script by itself not as part of our nextjs app it's just going to be oneof scripts that we're just going to run by itself so here we we do actually want to instantiate the client and then here we have the main function which will actually well simply insert so in the example they're using upsert which is essentially just adding but in case it already exists you can update it that's a very straightforward actually so then here the actual function is called and after it's done it will also disconnect right but the main function here is the meat of it and let me actually remove this because we don't want to do this we want to do something slightly different so we want to insert some posts so let's actually create an array with just some dummy data we can call it initial post and it's just going to be an array of posts so let's start off with one post so each post needs to have well a title well post post one okay and a slug right post one okay slug okay and now well what else do we need to specify here we don't have Auto we don't have autocomplete here no relevant suggestions because this is not typed here this array so is there maybe a way that we can use a Prisma here to help us out to type this array and the ENT is Yes actually because we have essentially described everything about the user and post there and in your application you're often going to need types for your users for users or posts right in your actual project you're going to have utility functions you're going to have intermediary functions and and places essentially where you need to type something in react we're going to have props for example you need to type props very often those are going to be very similar to what we have already described here so it would be kind of duplicative if we had to describe it again in types we don't have to do that luckily because Prisma also gives you types based on your models and we can use that in our application right so those types are coming from the Prisma client right so you're building the all of this into Prisma client and it has types and we can actually find those types so they're in here and then here under Prisma client here if I go to the index file here I can see there is actually a type for creating a post everything that is necessary to create a post there is actually a type created by pris prma for me so here I can say this array needs to be whatever that type is what needs to be an array of that right I do need to make that I don't need to import it properly here so we'll make it Prisma dots and then I will import Prisma from the client and now you can see I'm getting type safety here because we're saying this array needs to be of a particular shape right so now also I get auto complete I know oh yeah I need to specify content here as well and so here I'm just using a Prisma type for the seed file but you can imagine this is very useful throughout your application very often you're going to derive types from here because for a certain utility function this is not the exact type that you need maybe you want the title to actually be optional in some instance so you would slightly modify this to get the specific type you want but this is a very underrated feature of Prisma as well okay so here what else do we want to specify here so here we also have author so every post needs to be connected to some author but we don't have a user yet right we deleted everything so here you would do something like connect so we want to connect to a user but we don't have one yet so there's actually also connect or create so if there is not one yet we can actually just create a user here on the spot so here we can say where the email is again let say John and then we want to create right so we're going to create an actual user which is not only an email we do need email here when we do we do want to specify email here okay but and user also needs well let's actually use the type the suggestions here well user also needs hashed password right so let me just put some gibberish here so this is one post that's going to create a user for us we can add more posts let's actually just stick to one in the actual main function I get a good suggestion here so we start seeding and then we go over each post now the actual Prisma query to create a post is the following you see Prisma post. create and this is now a correct format because that's how we have typed this right so you can see there's no red Squigly lines so this should work perfectly fine so now I have my seat script so I don't have to manually create it over and over again I can just run this script currently our database is empty so I would like to run this script now how do I do that all right so we want to run this script now a lot of people make a mistake here so this is just a oneoff script that we want to run so we're not going to run this as part of our nextjs app we actually just need to use TS note actually and actually that same page has a nice uh command that we can just copy so here this is the command that we want to copy so actually we want to add a Prisma key to our package.json so here we can just copy this and just actually let's do it below the scripts so here we can have Prisma script so here we will say Prisma seed and we're going to use TS node to to run a typescript file one off now we do need to add compiler options here as well otherwise you're going to get an issue because we are using the es module syntax here and then this is the file that we want to run okay we do need to install TS node to make that work so let's install TS node as a def dependency and now to run this we can say MPX Prisma DB seed all right let's see what we get all right so that looks pretty good now if I go to my database here let's see what we have okay so now we have a user all right so we have a user and the user has posts right one post okay so this is looking pretty good if I now go to the homepage here or to/ post and refresh we see our one post and here we see the content all right so that's a way of seeding your database a quick note on error handling in Prisma so here when we submit the form we are invoking that server action right so here have an action create a post well actually we have other ones as well for updating and deleting and here we are using Prisma now there are certain things that can go wrong and in fact there are actually lots of things that could go wrong so you probably want to wrap this in a try catch so here I want to try to create this post in our database and if something goes wrong we will get an error will be thrown here we can catch that and Prisma will structure it in such a way that we can actually learn what the error is so for example here we can check if the error is an instance of let me actually import this Prisma client known request error so Prisma will have certain error codes that we can uh look up here as well right so they have a bunch of codes here so for example this particular one means that there is some unique constraint violation so here for example what we could have in our schema is that the email needs to be unique right so that's what we have here for the user the email needs to be unique so if a user user tries to sign up and we're attempting to insert a user into our database with the same email that already exists we will get an error here and because of this error code we know why it did not succeed right so here for example we also said that post here slug needs to be unique and slug is based on the title that's how we do it so here slug is based on the title so if I actually create a post here with the same title post one let's actually see what we get uh this is running on the server so if if I want to see the console log I need to open up my terminal here so let's actually submit this let's see what we get okay so now you can see we caught the error and we can deal with that as as we please also a quick note on caching caching in xjs is actually pretty complex topic which deserves its own video but just to give you some pointers here so now whenever I go here it's going to make this query to the database right so without caching whenever somebody would go here we're going to render all of this reach out to our database and send it back to user again which is not really efficient ideally we can do some caching here so then if the user comes to this page we don't have to reach out to our database all the way and back again so nextjs itself offers some caching so so nextjs has a so-called data cache this is actually very powerful cache if you deploy to for sale for example that data cache is also persistent even across deployments and by default if you get data with your omm it's not enabled right so if you want to enable something like that typically right so you may want to consider doing something like this here I'm using the cache function I can import this from next cache it won't show it for me here because as of recording it's still unstable so I need to import it as unstable cache and then I can rename it this should store the result in a data cache so so that we're not unnecessarily making database calls over and over again right so that is the data cache that nextjs offers now nextjs has another cache and in that cache you can add statically generated routes so for example the HTML of this page can be generated during the build so then we already have the HTML right so we only have to run this once we compute the HTML of this page and then when somebody goes here well we can just serve that HTML from a CDN right so then whenever somebody comes we're just going to serve it from a CDN over and over again so in that case we also do not have to make a database call over and over again now since I'm using prams here I'm using a dynamic route this is not statically generated by default however nextjs does offer the option to pregenerate so by default all the pages in your nextjs app are actually statically generated because that's optimal right if we if we can already compute the HTML during build time well we might as well do that now this route here though is dynamic right so this slug could be anything could be could technically be millions of different slugs so next CH will not pregenerate the HTML for millions of different possibilities here so if you have a dynamic route it will not be static by default however we can still pregenerate this ourselves for example the the top 100 most popular posts but it's outside the scope of this video so that's all nextjs now Prisma the company also offers something called Prisma accelerate right so this will allow you to optimize in many different ways including caching as well and so it helps you with connection pooling but also Global caching so here in the API docs they show you that you can actually also add a cache strategy to the ACT to your actual Prisma queries right so here I could then also add something like a cash strategy time to live so during 1 minute it's going to be serves from that cash right so that's also something that you may want to take a look at right so that's another level of caching that you can add as well that's something you may want to take a look at there are still some very powerful features that the Prisma RM offers like automatically generated migrations and it can run in socaled Edge environment now to show those things let me actually try pushing this to production right so there are also some production related issues that you need to know about so this is all development so this was all development and here we are using SQL light right so SQL light is essentially just a file part of your file system now if you deploy to a a host like forel SQL light is not going to work forell is a so-called serverless host so what they do essentially and I'll show you that in the dashboard as well once we deploy is that they will spin up a bunch of serverless functions to run the necessary compute so a serverless function is not a long running server right so traditionally you you had like a maybe even like a dedicated server just running in the background waiting for requests so that server is running even if you don't have any requests so it's not really efficient but with serverless functions you can run a compute as the requests are actually coming in and when there are no requests it's not going to run in the background so with serverless functions you do not have a persistent file system and therefore you cannot use sqlite here on forell and now there are other hosts like turo that actually do offer hosting for SQL light so forel does offer the a post grass option here so we can use that in production so I can go to the store tab here and I can create one database here on the free plan I can name it something like test and it's actually using the neon database under the hoods let me actually create this okay so I just created a database here on forel and here it shows you for Prisma how to connect to that so here I do need to change this in my schema now because now I'm connecting to I'm going to connect to a postgress database right so I'm going to remove my SQL light database for now and I'm just going to connect to my postr database right here okay now it does need the environment variables so here they they give me them I can copy them and I'm just going to connect to our database right here so here I can go to EMV and here I can paste my environment variables okay so now I'm connecting to my database on forel if so this could be my production database typically you don't want to connect to your production database during development but just to keep it a little bit simple here so now if I go back to my app if I refresh we will get an issue because we changed our schema and the Prisma client is not updated yet so if you try running the Prisma client will give you an error so we do need to update the Prisma client again so here I can say MPX Prisma DB push right it will not only update the Prisma client it will actually also update our actual database right and this time that's actually our production database on for sale so here you can see our database is now in sync with the Prisma schema so our database on forell where can I actually see that where is the data here well it's also here data if I now click here you can see we have these two tables that's what I just did here with DB push it connected to my for sale database and it also updated the Prisma client so now if I try going to slash posts uh I still get an error probably I just need to restart the dev server here I will restart the dev server and now if I refresh here okay so now you can see we are not getting any posts because the database that we're connecting to right now is empty right it has the tables and the and the columns but we don't have any rows and so now I have this database so I can delete that SQL light database that we had before this def. DB I'm going to delete this for now and now we have completely moved over to using that postgress database here on for sale right so in the real world what you would want to have is a database for production and then also a separate local database ideally the same type that you also have in production right so if you have post grass in production you ideally also want to have post grass in local development here right now we just have one database just for Simplicity but typically of course you don't want to connect to your production database during development so let's actually talk a little bit about migrations and a typical development and production workflow so in the beginning of a project you don't really know what your schema eventually should be you're just quickly prototyping you you're trying different things and so whenever you make a change and maybe you're maybe you're like uh post doesn't really need published right so now I changed my Prisma schema and we know that now we have to update our actual database as well right so we saw what we done what we've done so far is use one command for that which is MPX Prisma DB push and this will update our database and then published will not be a column anymore now this way we are not keeping track of the changes that we are making right so this does not produce migration files and that's fine with us because we're in the beginning of a project we're quickly prototyping and now we're like okay yeah actually it should have it should have published right so then I can save here I can quickly update my database again with this one command now over time you have a better idea of what the schema should look like and this time you actually want to keep track of the changes that you make in your schema why do you want to keep track of them well if I'm making changes in my local development database the exact same changes should also be applied to my production database right so I need to keep track of the changes I'm making so then in production or other environments or other people on my team apply the same changes so that all the databases are in sync right so now if I make a change maybe I'm going to add let's see what co-pilots can come up with for Me Maybe it has an image URL that I want to add now right so now I made a change I'm going to save here but I want to keep track of this change I just made so in development now not we're not going to run DB push we're going to say MX Prisma migrate we're going to create a migration and we have to say this is for developments if I press enter here now it will do it will do something similar to DB push but it actually create an artifact basically allowing us to keep track of the changes so then in other environments we can produce the same change okay so all data will be lost that's okay because we have a seat script as well okay so we can add a new migration so the first one we can just say first all right so then you can see this looks very similar as what we had before your database is now in sync with schema generated Prisma client but here it also says something about migrations and actually we can see that here now we also have migration here right so now here you will get a folder with all of the changes that you're making to your schema right so here is actually a SQL file and basically SQL that we can now apply right so this this would be during development we just made a change to our development database now when we push to production we have a history of the changes we made so then we can also apply these SQL files these migrations to our production database so that our production database is completely up to date as well right so that's how you would continue developing at some point when you know a little bit better about what the schema should be and you really want to keep track of changes that you're making and it's really and it's really nice that Prisma automatically generates these for you you can see when you run the migration command after it it also immediately runs the seaing files so we don't have to do that ourselves now like I just said we want to make sure that we apply these changes to our production database as well right that does not happen automatically so what we want to do is go to package.json one thing you could do you can say when we deploy when we deploy our app to forell we want to apply these changes to our production database right so here what we could do is post install we need to do two things actually but one of the things we could do is here also run that those run those migration files so to do that we say Prisma migrate and now it's not Dev it's deploy right so for production you could say and there's one other thing you also typically want to add here according to the Prisma documentation which is Prisma generate so when you deploy to forel forel will build our app now the Prisma client is in note modules we are not pushing that to forel so forel does some caching if we want to get all of the correct types also when we deploy we can run this script and it will generate the Prisma client right so this is something you typically want to add to post install all right so now let's actually try deploying to for sale and see if this all works so I'm quickly going to create a repo here on GitHub my cool blog I'm going to make it private create repository and then I'm going to push this to GitHub up I will add everything and just commit and push okay so now it's all here so now here on for sale what I can do I can add a new project click on import and now if I deploy for sale will grab will grab the repo here from GitHub and it will run a build right so it will install dependencies and then after that it will run that post install script okay so we get an issue and it is an environment variable yeah so here it's trying to connect to the database and we have our environment variables here and we have them on for sale as well but you need to connect your project so here you need to go to your project and then in the storage I can connect here and it will automatically and for sale will automatically set the environment variables for me okay now this project is connected I can just try a redeploy so here I can go to deployments and just uh redeploy here and actually the type checking is very strict so if you forget to type something it will F the build so let me actually quickly type this these param I will quickly just add that to the rebound okay let's try again all right so it succeeded let's actually open this up and let's see if we can actually work with this okay view posts and it actually already seated our database so we can see one post here if I click on this we can see the content okay let's actually try adding another one post two task create a post let's see what happens all right so now we see post two and if I click on this everything seems to be working all right the last thing I want to mention here has to do with serverless and Edge function so if I go to logs here you can see that as I I was browsing around uh certain things happened here so there was some compute here and you can see that there was a serverless function here that was servicing that request right so we just talked about servers functions so there's no long running server just a function basically more on demand and therefore we could not use SQL light but we can use the Prisma Ram now there is an even more advanced uh type of function you could say which is an edge function so an edge function is even closer to the user so that would be even faster if we could run the compute on an edge function now in nextjs by default if you have middleware so I could also add middleware to my app here I do it as a direct child of the source here so here I'm exporting a middleware function one of the main use cases for middleware is to do authentication so what you may want to do is actually getting a user from your database and you want to use the Prisma orm Prisma user and then we could try to get a user from our database so this middleware with next as is going to run on the edge other parts of your app may also run on the edge if you opt into them right so for example I can actually export a constant here I can say this needs to run on the edge right so wherever you add this the relevant compute for that will also run on the edge but the middleware by default will run there now omms generally speaking they're pretty sophisticated so they have some kind of query engine they need some resources and these Edge functions in the edge environment those are limited environments so you have more limited CPU memory you don't have access to to all of the noj S apis right so it's it's just a more limited environment and so OMS in general actually struggle a little bit with that so if you do it like this actually I will get an error here during development even and it will say Prisma Clan is not configured to run in forell Edge function so they offer you two options so traditionally you could use Prisma accelerate right so we saw it before it it can help you with caching it can help you with performance but it also helps you run the uh Prisma clients at the edge right so also on cloudflare and also helps you with a connection pool now more recently actually you can also run the Prisma Oram on the edge if you use a driver adapter so this is as of recording still in preview mode but they show you here how you can already start using that right so to run the Prisma Oram on the edge we we just need to create a we just need to instantiate the Prisma client a little bit differently right just a couple of lines like that just some just some lines like this so they basically have an adapter here based on the neon database in our case because we are deploying to forel postr which Under The Hoot is using the neon database so it would look something like this I recommend that you check out the docs for the exact code that you're going to need but this will allow you to run Prisma on the edge as well so we talked a lot about the Prisma as an omm but I recommend that you also check out their accelerate and pulse products as well so pulse is interesting because it will let you know if there is an update in your database so if you have Micro services for example there is a new user created in a database Prisma can send you a notification you may want to send an welcome email for example right so I would say check it out as well I had a great time working with Prisma and I want to thank Prisma for sponsoring this video I want to thank you for watching this video hopefully it was helpful good luck with adding a database to your nextjs application thanks for watching and I hope to see the next one bye

Channel: ByteGrad

Views: 26,417

Keywords:

Id: QXxy8Uv1LnQ

Length: 73min 41sec (4421 seconds)

Published: Thu Jun 06 2024