in this video we're going to build an expense tracker using neon a serverless postest database and Prisma as our orm and nextjs 15 with the latest features so we're going to end up with something like this that you can add an expense item let's say an amount and then add it's using server actions and new features in xjs 15 which we're going to walk through so let's Dive Right In neon is kindly sponsoring this video so thank you to the neon team for supporting the channel now on is serverless postgress you click a button and you get a connection string or a URL a serverless endpoint up in the cloud that scales Up and Down based on your application workload this is possible because they have separated storage from the compute so the compute or the serverless compute runs separately from the storage layer in neon now it supports traditional TCB connections using any post cross driver but you can also use the neon serverless driver which is a postest driver for JavaScript or top script that allows you to Corry your database over HTTP or websockets which is suitable for environments like serverless functions or the edge environment now a cool feature about neon is branching so it allows you to work with your data the same way that you work with your code just as you can create branches from your main data you can create branches from your data in neon now a branch includes the schema and also your data in an isolated copy so you can work in development testing preview deployments with real data and schema instead of having to seed your database or development database with mock data each branch has its own URL and again scales up and down automatically now if you haven't already you can go ahead and create an account login with any of these social providers and this is going to take you to an onboarding flow to create a project and then a database by default which is called neon DB so in my dashboard I'm going to create a new project I'm going to call this demo and the version of postrest that you want to use the region that you want this database to be deployed and you can hit create a project this is going to automatically create the neon DB database for you and a main branch which you can use to create isolated copies later on for your development or for your preview deployment and down here it walks you through different drivers and environments that you could use to connect to your new database if you scroll up to the dashboard you can also see your connection string here so let me just make this a bit bigger if this is a bit small so inside of our new project we have our neon database we are currently on the main branch the role and the compute or the access level that we have defined here you can see we have this connection string now something that neon also supports is pulled connection often times when you are accessing your database from sess environments as your workload goes higher so does the connections to your database so instead of exhausting your connections you can used a pulled connection string which is going to append your connection string with this Pooler which is very suitable for nextjs applications since they use serverless functions and Edge functions now we're going to walk through through connecting to our database using Prisma as I mentioned as our om and the setup but anytime that you wanted to go back to the quick start to see the options here or to get started it is here in this menu you can also go to the docs where I can show you from a high level there's just getting started uh playing with neon and connecting to your database some references and Concepts in neon there's framework specific quick starts such as nextjs and also Prisma there's going to be links in the description for your reference to find the correct pages in the documentation so definitely check them out now I've created a little walkth through for us to create this expense tracker application together and I'm going to follow this but it is basically my notes from the documentation just synthesized in this notion documentation page so we can follow along together now the first step is to create a nextjs app I have used my own next shat CN template so if you go to my repository again Link in the description there is this next shat CN which is a public repository you can use it to clone it to create a nextjs app that works with typescript tellin CSS and chaten or just start off from a brand new deployment this is what I have done again Link in the description for you now for the features that we are using in this expense tracker I want to upgrade to nextjs 15 now there's a video on Channel where we talk about nextjs 15 and the RC and the upgrade guide the new features there's a link in the description or somewhere in the card you can watch that video if you're interested you can also head to this upgrade guide in the documentation where it walks you through the necessary steps to upgrade your next dress application to the version 15 or to the RC just a quick note that if you go to the regular documentation you won't see this upgrade guide for version 15 it is only available at this rc. next. org again link is in the description so go ahead and use that link so I'm going to copy this pmpm code that is basically updating my packages next react and react Dom and also es lint to the RC version which is the latest version of nextjs that supports all the new features in react 19 so let me copy this I'm going to come back to my code open up my div tools or terminal let's copy this command so that's the first step we got our application upgraded I can close this and let me also close this up so the first step was to create our next JS application the next step is installing Prisma now Prisma is a typ safe omm if you're not familiar with Prisma there's going to be a video on the channel Linked In the description or in the card sver it basically allows you to connect and Cy your datab base using a standard API which is through the Prisma client so we're going to go ahead and ins install that so I can run pmpm add Prisma so let's go ahead and copy this code once youve done this you want to initialize a Prisma by running npx or pmpm DLX depending on the package manager you're using and then the Prisma and then the init command what this is going to do is that it is going to create a Prisma do schema file inside of your repository so down here I have this schema.
Prisma I'm going to explain what's happening here so we're using a postgress database and then we have to have our database URL this is our connection string which we're going to copy from our neon dashboard for Prisma now to be able to connect to our postgress instance so it also has automatically created this EnV file in my repository now this is not by default added to your git ignore so you can go to your G ignore and add this EnV file so you're not accidentally pushing this or committing this connection string to your repository so I added this up there now let's go back to our neon dashboard and then from here I'm going to click this pulled connection and copy this connection string bring it to my EnV file and copy this over here now something that you need to also pay attention to is that this SSL mode equal to require at the end of your connection this makes sure that the connection is only over safe or SSL connections now as I mentioned in the beginning neon also supports a serverless driver that allows you to Corry your database over HTTP and websockets which is suitable for serverless and Edge environment so if we going to set up Prisma to use this neon serverless driver instead of the default driver that Prisma already ships with now to do this you need to enable this driver adapter so if you're going to use use an adapter from Prisma to then pass in this neon serverless driver and replace it with the default driver in Prisma so inside of our esa. Prisma we have to add this preview feature which is in the newer versions of Prisma to then enable us to use an adapter to use a different driver instead of the default driver from Prisma now you can still use Prisma driver if you want to if you are using sess functions the Prisma driver would be fine but if you you want to use or query your data over HTTP from D Edge runtimes which doesn't support TCP connections or traditional connections to databases the neon serverless driver is the driver of choice and so therefore you need to use an adapter to tell Prisma to use that driver instead of the default driver so let's go ahead and install the adapter the neon database serverless driver and also web sucket package so let me just copy this code and come back to my terminal and add these packages you can also go ahead and install the necessary types for the VB socket package as a development dependency so just to double check that this is installed now let's go to our package Json make this a bit smaller so we have the serverless driver we have the Prisma adapter and we installed the VB socket connection now in The Next Step let's also install Prisma client this may not be necessary if you run the generate command it automatically installs this but while we are here let's also go ahead and add Prisma client now anytime that you're working with Prisma you're going to create a Prisma client that's tailored to your specific database schema which makes it easy to run typesafe queries and access your different tables and different functions that's accessible through the Prisma client so to instantiate a Prisma client before before we actually create our schemas I'm going to copy some code here and explain what we are doing here so inside of my lip I'm going to create Prisma dots file inside of it let me copy some code and explain what I'm doing here so there's two different things happening here which I'm going to try to explain if you go to Prisma documentation for a second let's go to the docs resources and docs if you search for the best way to instantiate a client in nextjs you're going to see a solution here let me just make this bigger now instead of returning this new Prisma client that we are creating here directly from this file we're going to hold a reference to this Prisma client in our Global disc object to avoid recreating this Prisma client in local development because of the hot module reload in nextjs in Dev mode when you are working on your application in your local machine to avoid recreating the Prisma client and exhausting your connection pool we're going to save this Prisma client in our Global disc using this Singleton pattern so we have this function that returns a Prisma client we're going to call this function if it doesn't already exist inside of our Global disc object so this is the first pattern that we're going to use based on Prisma documentation to create a Prisma client in nextjs now the second thing that I've combined or we combined with this step is act actually telling Prisma to use neon's serverless driver instead of its own default driver and this is what's happening here so we are setting some config to this websocket we are retrieving our connection string from our local environment variables we're creating a pool using that connection string we then using this Prisma neon adapter to then create our Prisma client and then we're going to share this Prisma client with this new adapter using the neon serverless driver and share that throughout our application so it's the combination of this step and if you walk through neon's documentation for using Prisma you're going to see this second part that I mentioned down here where they actually talk about uh changing the default adapter or the default driver for for Prisma to use this neon serverless driver now that we are here also let me mention that you need to also in install this buffer util package sometimes you might run into errors as I did so let me also add this pmpm ad- D as a development dependency let's clear this up okay so let's go back to the next step we've installed the buffer util and the next step is for us to create the database schema so let me close this off and recap what we have done so far so first step we created our nextjs application ation we upgraded it to NEX js15 then we installed the Prisma package and ran the Prisma init command this in turn created this schema. Prisma where you would include the type of database that you're using and the environment variable that is holding the URL or connection string to your database it was also creating this EnV file for us where we copied our pulled connection string from our neon dashboard to this file we also added the n v to get ignore because it doesn't have it by default in nextjs it only has the local because the convention in nextjs is to use the env.
loal in your local development environment but you can also use the EnV this is how Prisma works but make sure to add it to your ignore and then inside of our schema. Prisma we told Prisma that we want to use an adapter so we're going to install the adapter and we're going to use the neon serverless driver instead of the Prisma driver so that we can Corry our database from our serverless environments and Ed runtime using this offer HTTP instead of the traditional TCP connection so to instantiate a Prisma client inside of our lip folder we created this Prisma TS using neon serverless driver and hold a reference to dis Prisma client inside of our Global disc object so that we are not recreating this Prisma client on every hot module reload in our local development environment to prevent exhausting our connection pool now the next step for us is to actually create our database schema now we're going to create an expense tracker so let me just copy the model that I've created here so I have created an expense model this is going to map to an expense table inside of our database there's an ID this is the unique identifier for each record inside of our table it's default to U ID a created ad field defaulting to now updated ad title as a string and an amount which is an integer inside of our database so I kept it simple here but you can extend this Beyond just one table and this should be enough to just get the concepts down once we created this model or this schema inside of our Prisma we want to now sync this with our database schema and for this we're going to run the Prisma migrate command so you can run it with any PX Prisma migrate or in my case pmpm DLX Prisma migrate Dev to then map this to our new database that we created so let's go ahead and copy this code now this as I mentioned is going to create a new SQL migration based on this schema we just created inside of our Prisma it's going to then run that migration against the database to match or sync the database schema to this Prisma schema and then it runs the generate command to create or generate the specific Prisma client that's built using this schema we just created now as you can see here it tells you the migrations that was created and also that it has generated the Prisma client now if I go back to my neon dashboard for a quick second if I go to the tables we should be able to see an expense table and the Prisma migration that was run so there is an expense table here there's no records inside of it but this shows us that this migration was completed successfully now something you can do to also have a look at your database tables is to use the Prisma studio so you can run npx Prisma Studio or pmpm DLX Prisma Studio this is going to run on Local Host 5555 it actually opened automatically this looks at your schema. Prisma and based on that generates this GUI for you to interact with your database so for example you can add a record here can give it a title let's say fruits and then let's also give it some amount this inter is going to create that record inside of our table for us now just to see this also reflected inside of our dashboard in neon if I now refresh the page I can see this new record now for the fruits and the amount of 50 also inserted in my neon database now as the next step we want to fetch this expenses inside of our homepage just like the app that I showed in the beginning so inside of our page component the idea for me is to go ahead and fetch my database or fetch the expenses from the database right here inside of my server component so I can render them down here so let's fetch expenses now to do this we're going to create some functions that talks to our database so let's go inside of our lip here I'm going to create a file called expenses.
TS where I'm going to export some fun functions that allows me to talk to my database so let me explain what I have created here so I'm using the Prisma client that we created inside of our lib Prisma this is the Prisma client that we created now I'm going to use that client that I created and I'm exporting some functions get expenses create expenses which is going to use Prisma client under the hood to then Cy my database such as this one it's going to access the expense table and then find all the records there or create an expense which expects some data which is amount and title and then it uses Prisma client again on the expense table to create a new record with this data so simple functions that now we can use inside of our page component so here I can say const expenses equal to a wait get expenses from our lip now I need to turn this into an async function to be able to get that expenses now that I have my expenses I'm going to come down here and actually map over them and render some list elements for each expense so let's run our Dev server inside of another terminal window here pmpm Dev here we go so we have our only item that we created inside of our expenses here and the amount now the idea is for us to also add a form so we can use server actions in this case and our Prisma client to then insert a new expense inside of our database so let's go ahead and create this component over here so inside of components I'm going to create a new expense form. TSX let me copy some code and explain what I'm doing here so from a high level this is just rendering a form and inside of this form I have two inputs for a title and an amount and then I'm using server actions to handle form submission here to use actions I'm using this new use action state from react 19 this was used to call use form state in Prior versions of nextjs prior to xjs 15 if you have used it already and it was being exported from react Dom but now the new use action state is exported from react and it's basically the same hook with some updated features now you have to pass in a server action to this we're going to create the server action together in a second some initial State and this Hook is going to give you back two values the corrent state of the form which is going to be the initial State before the form submission or once you have submitted the form is going to be the result or return value of your server action if there is any result a success message or error message this is what your server action is going to return and then it's going to also give you a form action which you can pass to the action prop of your form now if you're not comfortable with this I have a video on the channel where we talk about use form State and use form status the use form state is basically doing the same thing so you can watch that video the only difference that I have seen between the use action State and use form state is that when using the use action state it automatically resets the form after the form submission whereas the use form State wasn't doing it and you had to pass in a specific ID to this for react to render your form but this is taken care of in the new use action state now let's go ahead and create our server actions now the convention that I like to use is to create an actions file inside of my library so I'm going to go actions.
