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

แชร์
ฝัง
  • เผยแพร่เมื่อ 23 ม.ค. 2025

ความคิดเห็น • 88

  • @Mantenner
    @Mantenner ปีที่แล้ว +16

    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
      @ethan_mick  ปีที่แล้ว +6

      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.

  • @ThunderboltPath
    @ThunderboltPath 11 หลายเดือนก่อน

    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!!

  • @GianlucaCassol-jz4ek
    @GianlucaCassol-jz4ek 8 หลายเดือนก่อน +1

    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

  • @AngusGaukrogerDev
    @AngusGaukrogerDev 8 หลายเดือนก่อน +1

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

  • @SuperR09er
    @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
      @ethan_mick  ปีที่แล้ว

      Thank you so much! I plan to!

  • @sundoel
    @sundoel 4 หลายเดือนก่อน

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

  • @alexandergarzo9415
    @alexandergarzo9415 ปีที่แล้ว +1

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

    • @ethan_mick
      @ethan_mick  ปีที่แล้ว +2

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

  • @akebu6
    @akebu6 ปีที่แล้ว

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

    • @ethan_mick
      @ethan_mick  ปีที่แล้ว +1

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

    • @akebu6
      @akebu6 ปีที่แล้ว

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

  • @robb7148
    @robb7148 4 หลายเดือนก่อน

    Great tutorial! Short and to the point. Thanks!

  • @GabrielMartinez-ez9ue
    @GabrielMartinez-ez9ue ปีที่แล้ว

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

  • @icongrindsetsfj
    @icongrindsetsfj ปีที่แล้ว

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

    • @ethan_mick
      @ethan_mick  ปีที่แล้ว

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

  • @rezaamya6444
    @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?

  • @austinwhitbeck3362
    @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
      @ethan_mick  ปีที่แล้ว

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

  • @firatdmf
    @firatdmf ปีที่แล้ว

    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
    @mcFishXtraMayo ปีที่แล้ว

    insanely perfect tutorial, liked and subscribed dude thanks a lot

  • @stefler87
    @stefler87 ปีที่แล้ว +2

    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
      @ethan_mick  ปีที่แล้ว +2

      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
      @y2b5 ปีที่แล้ว

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

  • @KiranKumar-or5uy
    @KiranKumar-or5uy 7 หลายเดือนก่อน

    Nice Lesson, Thank you Ethan.

  • @danielaquilino4805
    @danielaquilino4805 3 หลายเดือนก่อน

    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

  • @sujathareddyp9444
    @sujathareddyp9444 ปีที่แล้ว

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

    • @ethan_mick
      @ethan_mick  ปีที่แล้ว

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

  • @hanyafifi2906
    @hanyafifi2906 ปีที่แล้ว

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

    • @ethan_mick
      @ethan_mick  ปีที่แล้ว

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

  • @rutambhagat4556
    @rutambhagat4556 ปีที่แล้ว +2

    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
      @ethan_mick  ปีที่แล้ว +1

      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
      @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
      @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
      @ethan_mick  ปีที่แล้ว +1

      @@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
      @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"
      }
      }

  • @adehenry9591
    @adehenry9591 ปีที่แล้ว +1

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

    • @ethan_mick
      @ethan_mick  ปีที่แล้ว

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

  • @treva383
    @treva383 11 หลายเดือนก่อน

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

  • @zoki5388
    @zoki5388 ปีที่แล้ว +4

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

    • @ethan_mick
      @ethan_mick  ปีที่แล้ว +3

      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
      @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
      @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!

  • @codedwebs
    @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 ?

  • @White_cow_story
    @White_cow_story ปีที่แล้ว

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

    • @ethan_mick
      @ethan_mick  ปีที่แล้ว

      Heck ya, keep crushing it

  • @rutx122
    @rutx122 10 หลายเดือนก่อน

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

  • @joylodralive
    @joylodralive ปีที่แล้ว +2

    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
      @ethan_mick  ปีที่แล้ว +2

      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
      @joylodralive ปีที่แล้ว

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

    • @ethan_mick
      @ethan_mick  ปีที่แล้ว +1

      ​@@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.

  • @Fabbaist11
    @Fabbaist11 7 หลายเดือนก่อน

    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?

  • @subayeel
    @subayeel 27 วันที่ผ่านมา

    Thanks manh awesome tutorial ❤❤

  • @h13q18
    @h13q18 6 หลายเดือนก่อน +1

    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")
    }

  • @keithjackson4552
    @keithjackson4552 11 หลายเดือนก่อน

    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
      @ALVIERIDEVELOPER 6 หลายเดือนก่อน

      hey, you found any fixes yet?

    • @keithjackson4552
      @keithjackson4552 6 หลายเดือนก่อน

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

  • @ijuji_codes-gz3iv
    @ijuji_codes-gz3iv ปีที่แล้ว

    very helpful video, unlocked my hands :)

  • @ranatariqnajam
    @ranatariqnajam 5 หลายเดือนก่อน

    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

  • @ronaldpaek
    @ronaldpaek ปีที่แล้ว +1

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

    • @ethan_mick
      @ethan_mick  ปีที่แล้ว +3

      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.

  • @agcodes
    @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
      @ethan_mick  ปีที่แล้ว

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

  • @H3llT33HoW
    @H3llT33HoW ปีที่แล้ว

    Very helpful, thanks

  • @jona171998
    @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
      @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

  • @fujisan0388
    @fujisan0388 ปีที่แล้ว

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

    • @ethan_mick
      @ethan_mick  ปีที่แล้ว

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

  • @ekchills6948
    @ekchills6948 ปีที่แล้ว

    Thank you soo much ❤️

  • @sayazdir
    @sayazdir ปีที่แล้ว +1

    thanks Jim

  • @devcore1
    @devcore1 ปีที่แล้ว

    14:47 pages directory example

  • @lhfskal
    @lhfskal 6 หลายเดือนก่อน

    THANK YOU

  • @issiagaconde
    @issiagaconde ปีที่แล้ว

    thank you ❤❤❤❤❤❤

    • @ethan_mick
      @ethan_mick  ปีที่แล้ว

      Of course! Glad I could help!

  • @benyamin4634
    @benyamin4634 ปีที่แล้ว

    thanks

  • @abrahimzaman360
    @abrahimzaman360 ปีที่แล้ว

    👀

  • @y2b5
    @y2b5 ปีที่แล้ว

    Perfect!

  • @oii0712
    @oii0712 6 หลายเดือนก่อน

    VERY HELPFUL THANKS ethen @Build SaaS with Ethan