Hi, I am Francesco Ciulla, and I used Docker for ~10 years and Next.js for 5+ years.
In this article, I want to show you how you can dockerize a N...
For further actions, you may consider blocking this person and/or reporting abuse
Thanks for this. I've used Vercel 's deployment procedure myself and echo your thoughts on its excellence. My problem is that I've a big investment in Google Cloud hosting and don't want to switch. So, just now, if I wanted to use Next.js (which I do), I'd be a customer of the Docker intricacies that you describe so well.
But recently I've been looking at Svelte where to my amazement that I can use an "adapter" to build and deploy a Docker container to Google Cloud Run with just two commands.
I'm left wondering why Next.js have made things so difficult in this area.
You are wondering why a company that sells hosting services has made an open source platform that they manage easier to deploy on their platform, yet harder on others?
How about the features that only work on Vercel deployments?
I think it is pretty easy to see the "why" here. But just in case, I can represent it with one character: $
This is not a surprise to me, they are here for the money and it's fine. but for sure it's not the only way to deploy a frontend js app.
Yes, I had the same thought - just didn't like to say it! But if this is really the case, who can one blame them? As Elon Musk would say - "I've got bills to pay"
Not sure about this - compare yourself.
youtu.be/KNeJI61QVqg?si=UZvJwAhYid...
To me the Docker approach makes more sense if you have more than a single service, or some persistence engine like a DB or Redis.
same here
My experience using Astro over the last few months is a breath of fresh air compared to Vercel's Next.js.
Part of my motivation to move away from Next.js was due to features that felt like a Vercel vendor-lockin. Financially, Vercel is fine for the individual, but their pricing scales poorly in enterprise. Most larger companies also have their cloud provider in place and don't want to take on another. While you can containerize Next.js like any other app, some features won't work like they do on Vercel.
Beyond that, there are serious concerns with Next.js. In the past, I've had Next.js building modify my tsconfig files. I find it a bit shocking to have a framework modify setup/config files without asking first. I've also discovered that the React installed isn't the same as that runs in the Next.js runtime. Moreso, it was a beta version of React.
I feel strongly that libs shouldn't adjust config files and should run the versions we pin in our package.json files.
That drove me to Astro where, once past the learning curve, I found myself enjoying front-end dev a lot more.
maybe I should make a video on Astro with Docker, too
Thank you for the article. I have a middleware in my app and it looks like this image doesn't support it. I am doing some redirections and rewrites. Any idea how to solve it?
Failed to proxy http://localhost:3000/site Error: socket hang upat connResetException (node:internal/errors:720:14)
at Socket.socketCloseListener (node:_http_client:474:25)
at Socket.emit (node:events:529:35)
at TCP.<anonymous> (node:net:350:12)
at TCP.callbackTrampoline (node:internal/async_hooks:128:17) {
code: 'ECONNRESET'
}
Awesome blog, @francescoxx 👏👏
let's go @pradumnasaraf
Has anyone tried to deploy Next.js 14 Docker Image on AWS ECS? Do you face any errors after deployment?
not yet, but it should be fine.
After the deployment is complete, I get error cannot resolve hostname
Only happens on versions > Next 13.4
For older it works fine.
Hello Francesco Ciulla,
Thank you for the comprehensive guide on deploying Next.js with Docker. The code snippets are valuable, but providing explanations for each segment and offering insights into when to use specific configurations would enhance the tutorial's clarity. Including considerations on when this approach is most suitable would be especially helpful for readers seeking guidance on decision-making.
Thank you
a video about dockerfile is coming on youtube this week.
Well explained. Great blog, @francescoxx ! 🎉🎉
you are welcome
Your guide is so helpful. But I want to import variables, which way can I do it? Thank you.
Thanks for the feedback! 😊 If you want to import environment variables in your Next.js app with Docker, you can add them to a .env file and ensure they're available in both your app and Docker container. In Next.js, make sure variables you want to access in the frontend are prefixed with NEXT_PUBLIC_. When using Docker, you can pass these variables with a docker-compose.yml file or directly in the Dockerfile. Let me know if you need more details!
Awesome.
thank you!
how about the most important part how to build once deploy multiple times there is no dynamic env how can i do that?
Saving this article, I wanted to optimize the way I integrate Docker into my front-end applications. It will surely help.
stay tuned and check my youtube channel then