Apr 29
Loading video player...
In this video, I will take the next crucial step in building our expense tracker application. In the previous tutorial, we set up the basic routing and created the user interface for pages like "All Transactions," "Add Transaction," and "Edit Transaction," but they were all populated with dummy data. Today, we are going to change that by connecting our Next.js app to a real, live database. We'll be using Supabase, a powerful Firebase alternative that uses PostgreSQL, and we'll be integrating it using Prisma, a modern ORM. I will start the process by installing the necessary dependencies, including Prisma and the Prisma client. Then, I'll show you exactly where to find your database connection URL in your Supabase project settings and how to securely store it in a .env file. With the connection established, I will define my data model by creating a "transactions" schema in Prisma, complete with fields for an ID, amount, transaction type, and description. Then i will run the Prisma commands to generate the client and push our new table directly to Supabase. Commands and code: https://www.getmakedigital.com/blogs/nextjs/supabase-prisma-nextjs