Next.js 14+ Docker Tutorial - Dev and Prod Environments using Dockerfile and Docker Compose

In this video, you will learn how to configure next.js 14 project with docker for both development and production environments. I will show you both docker file and docker compose ways to build the images for next.js 14 project and run container for those images.
I will show you how to add services in docker-compose.yml file for both dev and prod environments to build and run containers with only one command.
Finally, I will show you how to convert docker images into shareable .tar files and load images in docker out of it.
00:02 Introduction
00:40 Create next.js 14 project
01:25 Learn Next.js 14+
03:00 Load api data in component
06:45 Build Dockerfile for Dev Environment
11:44 Build Dockerfile for Prod Environment
14:15 Test Docker images and containers
23:00 Build docker-compose.yml for Dev and Prod services
30:20 Test docker-compose.yml for both Dev and Prod Env
35:00 Build shareable .tar file for docker image
#docker #nextjs14 #dockercompose
Follow WhatsApp Channel:
whatsapp.com/channel/0029Va7y...
React tutorials:
• React.js Tutorials
JavaScript Tutorials and Projects:
• JavaScript Tutorial an...
Angular Tutorials:
• Angular 16 Life Cycle ...
Angular 16 Crash Course For Begineers:
• Angular 16 Crash Course
Tech Tutorials - Random:
• Postman Tutorial - Tes...
Complete Next.js 13 Tutorials: • Next.js 13 Tutorials -...
Next.js 14 Tutorials:
• Next.js 14 Tutorials -...
Node Express MongoDB Bootcamp: • Build REST API with No...
ChatGPT Tutorials: • ChatGPT
Join our facebook group:
/ 996305460498149
Contact us for development services:
/ umair-jameel-24aa5368

Пікірлер: 28

  • @en_kratia
    @en_kratia4 ай бұрын

    Several seconds of your explanations of volumes is more useful for me than dozens of youtube videos/articles and stack overflow answers, Thank you.

  • 4 ай бұрын

    You're great Umair, thanks for sharing your knowledge

  • @basitbaig
    @basitbaig3 ай бұрын

    Thank you, you done it with super simple excellent way, keep doing good work.

  • @dknzx4964
    @dknzx49642 ай бұрын

    This was so helpful. Thanks!!

  • @kavindusenevirathne
    @kavindusenevirathne3 ай бұрын

    Thank you very much Umair!

  • @VoceBR97
    @VoceBR972 ай бұрын

    Omg, thank you so much friend \o/ Another subscriber

  • @24pratikbhagwat68
    @24pratikbhagwat686 ай бұрын

    Hey i have a doubt while using docker suppose we want to change some files and then see the changed code do we need to first copy the project on our local machine or we can change from docker container itself then how could you please explain??

  • @rayhanislam7518
    @rayhanislam75183 ай бұрын

    How can I use it like changes to reload. I test it. but not working

  • @averstrum6372
    @averstrum63723 ай бұрын

    Shouldn't the production build be the dist folder only with nginx and as small as 15mb, not the volumeless 2gb dev environment?

  • @srrain1342
    @srrain13423 ай бұрын

    How would you use docker compose watch with this?

  • @roshankumar-um9he
    @roshankumar-um9he5 ай бұрын

    Can we access NEXT_PUBLIC_ prefix env variable in docker.. because it’s giving me undefined in docker environment

  • @gnanadeep3605

    @gnanadeep3605

    Ай бұрын

    same here

  • @user-jj9ns3xj8p
    @user-jj9ns3xj8p5 ай бұрын

    hii! @umair I got this tricky problem do you think you can help me? So basically when i run build with env then all my values get hardcoded and if i run build without env then the process.env.url stays the same but it doesn't read values from .env file even after copying it to standalone output dir of build, i get undeifined. I have a backend code which was running at localhost:8000, so now when i create the nextjs frontend image and nodejs backend image and try to run them on k8s the backend url get changed so because of hardcoded values ,the frontend can't connect to backend now. I can run backend first then get the ip address and build the frontend image accordingly but in future if i make any change to my backend because of which i might get new ip address then again i have to rebuild my frontend image.Then all the cicd, and zero downtime strategy of k8s will be wasted.I tried official and other site but didn't actually helped.Even a short video will be helpful.Thank you.

  • @NitinSharma00001

    @NitinSharma00001

    4 ай бұрын

    Hi! Did you got any solution to this problem, I'm facing this issue a lot and having a lot of tech debt due to it?

  • @user-jj9ns3xj8p

    @user-jj9ns3xj8p

    4 ай бұрын

    @@NitinSharma00001 No Bro :(

  • @zoki5388
    @zoki53886 ай бұрын

    Hey mate, you make good videos but you should share link to repo.

  • @roshankumar-um9he
    @roshankumar-um9he5 ай бұрын

    How will i set client env variable in next js with docker.. it giving me undefined in docker environment

  • @user-jj9ns3xj8p

    @user-jj9ns3xj8p

    5 ай бұрын

    if you are creating production build then name your .env either as .env.production or .env.local it will load env variable at build time but please note that all the values will be hardcoded.

  • @user-jj9ns3xj8p

    @user-jj9ns3xj8p

    5 ай бұрын

    and one more thing if you are running dev then follow the video guide.

  • @mdabuhanif357
    @mdabuhanif3575 ай бұрын

    When I update the code on my local machine, then it's not updated automatically in the browser. I tried docker compose watch, but not working. I use Windows. How can we do it? Thanks

  • @ChrisDville

    @ChrisDville

    5 ай бұрын

    In development you can use a bind mount

  • @priyankpal7844
    @priyankpal78443 ай бұрын

    why image size is too large for production

  • @SubburajK-fe4er
    @SubburajK-fe4er6 ай бұрын

    i am waiting for CI/CD :)

  • @ProgrammingwithUmair321

    @ProgrammingwithUmair321

    6 ай бұрын

    Already published on my channel

  • @SubburajK-fe4er

    @SubburajK-fe4er

    6 ай бұрын

    @@ProgrammingwithUmair321 I will check it thank you. you are doing great job :)

  • @user-hd3lx8qc7s
    @user-hd3lx8qc7s4 ай бұрын

    if you are using docker compose and declare a ports like: 3000:300 you are no need to expose port in dockerfile

  • @nahueljj
    @nahueljj3 ай бұрын

    fetching on server side dont work

  • @user-uu2vo4rk6u
    @user-uu2vo4rk6u6 ай бұрын

    [Error: ENOENT: no such file or directory, open '/app/.next/BUILD_ID']