The BEST Next.js setup: Next.js + Postgres + Docker (Dev / Prod)

Sdílet
Vložit
  • čas přidán 25. 06. 2024
  • Get Docker Desktop here: dockr.ly/4dkjx8a (paid sponsorship).
    Disclaimer: this is a sponsored video (paid). It's your responsibility to evaluate safety, accuracy and other relevant parts of the reviewed product.
    NEW - React & Next.js Course: bytegrad.com/courses/professi...
    Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
    👉 Check out Kinde for auth and more bit.ly/3QOe1Bh
    👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
    👉 Professional JavaScript Course: bytegrad.com/courses/professi...
    👉 Professional CSS Course: bytegrad.com/courses/professi...
    👉 Web development roadmap 2024 & 2025: email.bytegrad.com
    👉 Email newsletter (BIG update soon): email.bytegrad.com
    👉 Discord: all my courses have a private Discord where I actively participate
    👉 Kinde: check out Kinde for auth and more bit.ly/3QOe1Bh
    ⏱️ Timestamps:
    00:00 Intro
    01:13 Quick example of Dockerizing Next.js for local development
    01:31 docker init
    03:04 Docker compose watch (hot reload!)
    03:55 Docker Scout
    04:54 Postgres development setup (with Docker)
    06:39 Prisma setup
    11:53 Docker debug
    13:05 Production environment
    13:29 Vercel setup
    18:54 Database migrations
    22:45 Docker + Next.js + Postgres final overview
    #webdevelopment #reactjs #nextjs #docker

Komentáře • 55

  • @ByteGrad
    @ByteGrad  Před měsícem +3

    I had a wonderful time working with Docker once again, get Docker Desktop here: dockr.ly/4dkjx8a (paid sponsorship).
    My latest course is out now (Professional React & Next.js): bytegrad.com/courses/professional-react-nextjs -- I'm very proud of this course, my best work!

  • @matthewgiger6120
    @matthewgiger6120 Před 9 dny +2

    This is incredibly detailed and dense. It's like you used LZW compression on this subject.

  • @spectagodx3958
    @spectagodx3958 Před měsícem +18

    Great Video. I have deployed several NextJS container and it’s all fun and games until the container is behind a Proxy. For some reason NextJS 14 ignores env variables like HTTP_PROXY that node typically can handle. NextJS then is not able to send requests to services outside that proxy network like Auth providers. Do you know how set proxy variables to NextJS so the app can pass proxy’s?

  • @Alex.Shalda
    @Alex.Shalda Před měsícem +3

    Awesome vid! Exactly what I need 🎉 thank you ❤

  • @404-not-found-service
    @404-not-found-service Před měsícem +1

    Thank you for this material, your content helps me a lot

  • @coders_rant
    @coders_rant Před měsícem +1

    Thanks. Needed help with docker

  • @subhranshudas8862
    @subhranshudas8862 Před měsícem +1

    Thanks dude!

  • @ShahNawaz-oj5xt
    @ShahNawaz-oj5xt Před měsícem +1

    Loved the tips on hot reload on Docker. Can you please make more videos on docker and kubernetes? Thanks!

  • @not_a_human_being
    @not_a_human_being Před měsícem +1

    great tutorial about going live with next/pg app in Vercel!

  • @amraromoro
    @amraromoro Před měsícem +1

    What i like more about your videos your calm voice while explaining.

  • @vinoopb
    @vinoopb Před měsícem +2

    Hey, great video! May I know what theme you are using for VSCode please? Thanks!

  • @jfhandfield
    @jfhandfield Před měsícem +1

    Wow great video once more. Do you think you could do a video on dockerizing a next JS app in a TurboRepo. How to bundle all the dependencies and everything. That would be my next step in my company. Thank you for your time!

  • @prashantindurkar1457
    @prashantindurkar1457 Před měsícem +1

    Great Great Video Thanks

  • @PaulMerupu91
    @PaulMerupu91 Před měsícem +1

    Great content!

  • @BarisPalabiyik
    @BarisPalabiyik Před měsícem

    We can pass the path value from window to the server action along with the formData to revalidate sender path dynamically right?

  • @cisdolce
    @cisdolce Před měsícem

    i love this guy

  • @pixbug3359
    @pixbug3359 Před měsícem +1

    Legend.

  • @lostinthenarrativve
    @lostinthenarrativve Před měsícem +1

    do I need to learn SQL before postgres or I can just jump in ?

  • @kritsrijakkot9175
    @kritsrijakkot9175 Před měsícem

    If I want to use docker compose to create containers for nextjs and postgre in the same time I build because I have problem about after build docker compose not connect to database. Can someone help me or show the example for me pls. Thank you

  • @sandzz
    @sandzz Před měsícem +2

    Very well made tutorial. I am looking for a stack for my side project. So I can use vercel for the edge compute. but my postgresql will sit in 1 region only. So there is no point using edge compute for my nextjs app at all, because the responses will get delayed due to DB query anyway. Is there a good cheap way to handle db latency?

    • @sandzz
      @sandzz Před měsícem

      or should I put all in a single VPS and call it a day?

  • @user-ru8hn9hb5c
    @user-ru8hn9hb5c Před měsícem +1

    Do you think Drizzle is better than Prisma?

  • @ernestisaev6543
    @ernestisaev6543 Před měsícem

    what the color theme u use ?

  • @zacharyshifrel9107
    @zacharyshifrel9107 Před měsícem

    How do you guys feel about using the server side of Next.js (e.g., for fetching) while you already have an express backend? I do it, but it feels weird to talk about having two servers, lol.

  • @doob50
    @doob50 Před měsícem +1

    thank you for the video! I was looking for a docker nextjs postgres video with prisma 😊

  • @netTraverser
    @netTraverser Před měsícem +2

    I don't know if this qualifies as being out of the scope of what you typically put out, but can you do a full on tutorial of docker? If it isn't too much to ask for

    • @ByteGrad
      @ByteGrad  Před měsícem +5

      Was thinking about it, may do it!

    • @netTraverser
      @netTraverser Před měsícem +1

      @@ByteGrad appreciate it

  • @academyonnet
    @academyonnet Před měsícem

    Did I miss the timestamp where you explained why I would need a docker if I can develop on my local machine, push it to git and from there I can deploy it on Vercel?

    • @Dom-zy1qy
      @Dom-zy1qy Před měsícem +1

      If you dockerize something, you can deploy it anywhere that you can host docker containers (which is pretty much everywhere).
      Also allows you to host it locally in an environment that much more closely mirrors the deployed environment

  • @andrejkling3886
    @andrejkling3886 Před měsícem +1

    Good video. Thank you. Using orm for real production it’s not good practice …

  • @zerefdev
    @zerefdev Před měsícem +1

    Please add "prisma" to the title:)

  • @haiffy
    @haiffy Před měsícem

    Would be nice if you publish this as a starter in GitHub

  • @Devlou333
    @Devlou333 Před měsícem +1

    I'm a Front-end Developer. I learn SQL in High School. I want to learn Next.js. Should I learn Algorithm & Data Structures first or just GO for Next.js ?? Please Help

    • @azamataliqulov1601
      @azamataliqulov1601 Před měsícem +1

      If you never learn Algorithm & Data Stuctures, first learn them

    • @Devlou333
      @Devlou333 Před měsícem +1

      Thanks 🙏

    • @Alex-bc3xe
      @Alex-bc3xe Před měsícem +2

      Even as a fronted developer you need at least data structures nested arrays of nested objects maps sets and so on this is like the foundation

    • @poznianski
      @poznianski Před měsícem +7

      You don't need linked lists and and binary search for the 99 % of front end tasks.
      If you are already a frontend developer and want to learn the most modern framework - just do it and don't waste your time.

    • @breachr4696
      @breachr4696 Před měsícem +1

      Learn react before you do Nextjs, it's much more important. DSA is important but more so for a back-end developer than a front-end developer. Like the comment above me says, you just need to learn the fundamental data structures.

  • @maksymdudyk1718
    @maksymdudyk1718 Před 28 dny

    I would be so nice of you, Wesley, if you could provide your true subscribers a link to github repo's codebase for this video.

  • @edhahaz
    @edhahaz Před měsícem +1

    Postgres (Prisma) so... not postgres

  • @secretcommander2519
    @secretcommander2519 Před 3 dny

    How does this work on yours and not on mine? Does this not work on windows?
    >docker compose up --watch
    unknown flag: --watch

  • @ustav_o
    @ustav_o Před měsícem +4

    really nice video but lets please stop using prisma

    • @kaan1882
      @kaan1882 Před měsícem +3

      then what to use in your opinion

    • @looming_
      @looming_ Před měsícem

      @@kaan1882Drizzle

    • @muhammadalifdanielbinmohdh3188
      @muhammadalifdanielbinmohdh3188 Před měsícem

      @@kaan1882drizzle

    • @copperweave
      @copperweave Před 3 dny

      ​@@kaan1882 they'd probably say Drizzle but Prisma is fine for most applications tbh.
      Drizzle can be more performant and is more customizable, but Prisma is functional out of the box. When Prisma didn't support joins it was a lot more important.

    • @runankaroy2687
      @runankaroy2687 Před 2 dny

      ​@@copperweaveOr not to use any ORM. SQL commands do fine.