How to set up Prisma with Next.js and Postgres!

[@Mantenner]

Mate you are a legend, so many tutorials I watched focused so much around vercel, supabase etc and not actually setting up the whole process, your tutorial is the first one that I successfully connected to my own locally hosted postgres DB. Thanks so much. The way you explain every step of the way is just brilliant too.

[@ethan_mick]

Thank you so much for the kind words!! I think it's really important for people to understand the fundamentals and to be able to build software without specific vendors -- being able to drop down and use just regular Postgres gives you the most power and flexibility.

[@GianlucaCassol-jz4ek]

I've been searching for a way to use Postgres with Next.js. Amongst more than 20 videos, this was the best explained one and the only that actually helped me. Thank you so much, you gained a loyal follower

[@ThunderboltPath]

This is fantastic! I've been looking for such bite-site tutorials no longer than 15 minutes because that's just how much my brain can handle. State-of-the-art tech stack and clear cut explanation, are you kidding me. Your channel is way too underrated! I sure will build saas with you, Ethan!!

[@AngusGaukrogerDev]

Nice one Ethan, my project is now ready for success. Thanks for the in depth run down and explanation, really helped me

[@sundoel]

Stright to the point, easy to follow, clear explanations, thank you so much, have a nice day !

[@SuperR09er]

I just want to commend you that your videos are one of the most informative, focused and easy to understand of all the instructors on youtube. Continue like that :)

[@ethan_mick]

Thank you so much! I plan to!

[@alexandergarzo9415]

I found the perfect channel with the perfect stack for my Saas! Thank you!!!

[@ethan_mick]

🥹 Thank you! Can't wait to see you around!

[@robb7148]

Great tutorial! Short and to the point. Thanks!

[@akebu6]

This is truly helpful, saved me a lot of time searching online how to do this. Thanks Ethan!

[@ethan_mick]

So glad it helped! You are very welcome, hope to see you around!

[@akebu6]

@@ethan_mick I'm gonna stick around after this to learn more!

[@austinwhitbeck3362]

Haven't been a dev very long and I've been wanting to try and practice some fullstack skills to better communicate with the backend devs on my team. This was a great tutorial to help me get started and I appreciate the time and effort to show both the /app directory way and the /pages way! Thank you!

[@ethan_mick]

Glad I could help! Let me know if you need anything else :)

[@icongrindsetsfj]

Fantastic explanation. Cleared so many doubts. Please keep making long form contents like for learners like us. Thank You Boss

[@ethan_mick]

Thank you, I will! Glad I could help :)

[@stephanpaul8954]

I've been wanting to learn more about next and there has been SOOO many changes extremely recently. So im watching videos from 3 weeks ago and they just don't apply anymore 🤣 I am also wanting to learn prisma so this was extremely helpful!! Thanks a ton

[@ethan_mick]

Thanks for watching! Yeah, it's kinda crazy. We're watching in real-time as Vercel iterates on the app directory, and each release changes things pretty dramatically. That being said, they've warned it's still beta, so they can be pretty dramatic with the changes. Let me know what else you'd like to see!

[@y2b5]

Same here - that's why I find it so useful when Ethan elaborates on the recent changes in his examples.

[@GabrielMartinez-ez9ue]

just ran into your channel. Great stuff mate. You are introducing some new valuable stuff which i am incorporating to my apps.

[@firattech]

Very helpful video and greate explanation. I was having very hard time getting data from my database to be displayed. Thank you for the video!

[@mcFishXtraMayo]

insanely perfect tutorial, liked and subscribed dude thanks a lot

[@h13q18]

If you are trying to use prisma with supabase add in .env file variable with name DIRECT_URL, which will be the same as DATABASE_URL, but will have a 5432 port, instead of 6543. After that update your schema.prisma file and add directUrl after url. It will look like this: datasource db { provider = "postgresql" url = env("DATABASE_URL") directUrl= env("DIRECT_URL") }

[@KiranKumar-or5uy]

Nice Lesson, Thank you Ethan.

[@adehenry9591]

You’re a very good teacher 👍🏾....smashing that subscribe button!

[@ethan_mick]

Thank you so much!! I means so much hearing that :)

[@joylodralive]

Hey Ethan, thanks for making this video! Do you know what's the most cost-efficient option to host PostgreSQL database, yet still scalable? Or, what’s your personal preference?

[@ethan_mick]

Hello and thanks! I think this heavily depends on your needs. Generally "cost-efficient" and "scalable" are orthogonal. You're sacrificing one for the other. For small side projects I run a Postgres instance on a VPS ($6/mo) and that works great. For clients in production I use a cloud provider, either AWS+RDS, Supabase, or Digital Ocean's Databases. It's more important to have backups and redundancy than be super cheap. Generally, I think just running your own Database (ethanmick.com/how-to-install-and-setup-postgresql-14-on-ubuntu-20-04/) it good until you want to really take your project and scale it. Then I move to a cloud provider.

[@joylodralive]

@@ethan_mick Hey thanks for your response. I've been hearing a lot about hosting on Docker. Any thoughts?

[@ethan_mick]

​@@joylodralive Hosting Next.js or Postgres in docker? I run Next.js in docker all the time, and I think this works well. I don't recommend Postgres in docker except for local development. It adds additional complexity with connecting, scaling IO, and expanding storage. Docker is fantastic for 12 factor ephemeral apps. Databases are meant to be started and never stopped and should be rock solid. Adding docker into the mix causes more things to break for that layer. You can do it, of course, but need to be very careful that you aren't losing data.

[@sujathareddyp9444]

really superb explanation sir i am from India I usually watch your videos. thank you so much

[@ethan_mick]

Thank you! I love helping people out from all over :)

[@Fabbaist11]

I noticed you searching through a long list of commands when searching for docker postgres in the terminal. What are you using to do that?

[@White_cow_story]

thx bro,i feel i'm somwhere close to the ture with your videos

[@ethan_mick]

Heck ya, keep crushing it

[@zoki5388]

Hey Ethan any tips on how to save image urls to prisma?

[@ethan_mick]

Sure! Do you want to save the image data itself or just a URL that points to the image? If you're saving just the URL, treat it as a string and use String. If you are saving the image data itself (fine for small images, not recommended for large/lots of images) use bytes: www.prisma.io/docs/reference/api-reference/prisma-schema-reference#bytes If you're looking to save a lot of images, consider using blob storage either in the cloud (S3, etc.) or with a Postgres Extension (www.postgresql.org/docs/current/lo.html), and then just save the lookup string/url in the table. Let me know if you want a more detailed walkthrough and what you're aiming to achieve!

[@zoki5388]

​@@ethan_mick Hey, I'm sorry for late replay I was sick. I went with your first suggestion, turning image to string and sending it to cloudinary API and returning string. I hope you got one of those two jobs, and I hope you will keep making videos. If you need any video suggestions let us know.

[@ethan_mick]

No worries at all, I hope you feel better! Glad you got it working, I think your solution is dead on. And yes, I did get one of the two jobs 😁 !! Very excited to keep making videos!

[@ijuji_codes-gz3iv]

very helpful video, unlocked my hands :)

[@agcodes]

damn, this was so informative and well explained, thanks a lot ! waiitng for new videos on Nextjs prisma and maybe tRPC tysm. (+1 subscriber)

[@ethan_mick]

Thank you! I'm planning on playing around with tRPC. The Server Actions in Next.js might change that though...

[@rutx122]

So with this can I build a small ecommerce just with prisma and maybe cloudinary to save the images?

[@H3llT33HoW]

Very helpful, thanks

[@rezaamya6444]

Thanks. running `npx prisma generate` on 9:13, is not doing anything and making any effect in my system. I ran `npx prisma migrate dev --name add unique` and it build a migration file for me. It is strange how you updated your init migration file. Isn't it against the concept of migration?

[@danielaquilino4805]

When i try to migrate am receiving : Error: Failed to create a new migration directory. 0: schema_core::state::CreateMigration with migration_name="init" draft=false at schema-engine\core\src\state.rs:247

[@treva383]

When am in development mode results from database are showing up but when I deployed on vercel, it is failing to fetch

[@ranatariqnajam]

Hi, Mate i saw your video about postgres it is very nice and informative, i understand it well, But when you entered the command into terminal , please also mention the command for windows users. Thanks

[@codedwebs]

is it possible to get data from db without declaring schema ? as my db was prebuilt having data...now i want to connect it with next prisma, what should i do ?

[@sayazdir]

thanks Jim

[@rutambhagat4556]

I tried to use this with postgres db from railway app and supabase but on both of them i cannot seem to be able to seed the database for some reason, I have followed everthing else from the tutorial

[@ethan_mick]

What was the particular error? When connecting to a remote database make sure the DATABASE_URL is correctly set to use that database and then Prisma should pick it up automatically.

[@rutambhagat4556]

@@ethan_mick pnpx prisma db seed .../share/pnpm/store/v3/tmp/dlx-20194 | +2 + .../share/pnpm/store/v3/tmp/dlx-20194 | Progress: resolved 2, reused 2, downloaded 0, added 2, done Environment variables loaded from .env Running seed command `ts-node --compiler-options {"module":"CommonJS"} prisma/seed.ts` ... An error occurred while running the seed command: Error: Command failed with ENOENT: ts-node --compiler-options {"module":"CommonJS"} prisma/seed.ts spawn ts-node ENOENT  ERROR  Command failed with exit code 1: prisma db seed pnpm: Command failed with exit code 1: prisma db seed at makeError (/home/voldemort/.local/share/pnpm/global/5/.pnpm/pnpm@7.29.1/node_modules/pnpm/dist/pnpm.cjs:23074:17) at handlePromise (/home/voldemort/.local/share/pnpm/global/5/.pnpm/pnpm@7.29.1/node_modules/pnpm/dist/pnpm.cjs:23645:33) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Object.handler [as dlx] (/home/voldemort/.local/share/pnpm/global/5/.pnpm/pnpm@7.29.1/node_modules/pnpm/dist/pnpm.cjs:219303:7) at async /home/voldemort/.local/share/pnpm/global/5/.pnpm/pnpm@7.29.1/node_modules/pnpm/dist/pnpm.cjs:227043:21 at async main (/home/voldemort/.local/share/pnpm/global/5/.pnpm/pnpm@7.29.1/node_modules/pnpm/dist/pnpm.cjs:227010:34) at async runPnpm (/home/voldemort/.local/share/pnpm/global/5/.pnpm/pnpm@7.29.1/node_modules/pnpm/dist/pnpm.cjs:227242:5) at async /home/voldemort/.local/share/pnpm/global/5/.pnpm/pnpm@7.29.1/node_modules/pnpm/dist/pnpm.cjs:227234:7

[@rutambhagat4556]

I tried both connection strings from supabase and railway app. I also copied files from your git repo to avoid any syntax errors but didnt work

[@ethan_mick]

@@rutambhagat4556 Are you on the latest version of Prisma? Double check that and if you have installed "typescript ts-node @types/node" locally as well.

[@rutambhagat4556]

@@ethan_mick This is my package.json file { "name": "next_auth", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "prisma generate && next build", "start": "next start", "lint": "next lint" }, "prisma": { "seed": "ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seed.ts" }, "dependencies": { "@prisma/client": "^4.11.0", "@types/node": "18.15.3", "@types/react": "18.0.28", "@types/react-dom": "18.0.11", "next": "13.2.4", "react": "18.2.0", "react-dom": "18.2.0", "typescript": "4.9.5" }, "devDependencies": { "prisma": "^4.11.0", "ts-node": "^10.9.1" } }

[@ronaldpaek]

is npx vs pnpm dlx any difference for prisma init? i notice you're using pnpm

[@ethan_mick]

I'll write an article about this, but basically they are the same, but `pnpm` caches things in a central cache and only downloads things once, ever. It's fast and saves disk space.

[@fujisan0388]

Thank you for the video and what is the DB graphical tool you're using?

[@ethan_mick]

Yep, it's eggerapps.at/postico2/ ! It costs ~$60, so not cheap, but it's so helpful when working with Postgres.

[@ekchills6948]

Thank you soo much ❤️

[@ethan_mick]

Any time!

[@lhfskal]

THANK YOU

[@keithjackson4552]

If I am trying to follow your Set up Next-Auth with Next.js and Prisma video and I can not seem to get the User to be defined when Next-Auth is validating so when it redirects I get a 404. Can you recommend possible fixes, tutorials or possibly meet up for a screen share? Thanks have a nice day.

[@ALVIERIDEVELOPER]

hey, you found any fixes yet?

[@keithjackson4552]

@@ALVIERIDEVELOPER I did not find a fix for Next-Auth but I switched to clerk and everything works great now.

[@hanyafifi2906]

what app is used by Ethan to check out the postgres db tables as shown in minute 6:42

[@ethan_mick]

I use: eggerapps.at/postico2/ It is not free however.

[@luckystrike5882]

Hey Ethan, I've been loving your videos. It's rare that someone breaks down everything and shows best practices. I was following along and everythig worked until you got to the part using the Pages method. When I import prisma from lib, I get an error saying "PrismaClient is unable to run in the browser." I fixed it by turning it into a client component with 'use client' but wondering what exactly Vercel changed. Thanks again!

[@ethan_mick]

When you are using Prisma in the `pages` directory, make sure you are only using it within a function that runs on the server, eg: getServerSideProps. You can't use it anywhere else. Next.js will code split that out for you so it won't be included in the client.

[@issiagaconde]

thank you ❤❤❤❤❤❤

[@ethan_mick]

Of course! Glad I could help!

[@jona171998]

Thanks for this tutorial, it what I was looking with the app exp folder of next13. Could I do the same as pages/example.tsx in app/example/page.tsx?

[@ethan_mick]

Yes you can. In a React Server Component (in the app dir) you can just use Prisma directly: github.com/ethanmick/prisma-next-postgres-example/blob/main/app/page.tsx#L4-L8. Otherwise you need to use getServerSideProps: github.com/ethanmick/prisma-next-postgres-example/blob/main/pages/example.tsx#L13

[@devcore1]

14:47 pages directory example

[@benyamin4634]

thanks

[@abrahimzaman360]

👀

[@ethan_mick]

👋

[@y2b5]

Perfect!

[@ethan_mick]

👌

[@oii0712]

VERY HELPFUL THANKS ethen @Build SaaS with Ethan