Decrease Next.js Docker Image Size 15x

[@tsykin]

I used tips from your video and actually managed to decrease image size from 2GB to 139MB. Thanks a lot! Unfortunately some dockefile steps that you specified are stale, specifically: - CMD - ENV declaration it's an easy fix and I am still very grateful for provided info 👍

[@jitxhere]

If you don't mind can you please share what fix did you implement?

[@javohirmirzo]

​@heyjitendra do you use latest docker version? It should show warning messages for deprecated syntaxes

[@haiffy]

Cant believe you said easy fix then left us hanging

[@tsykin]

@@haiffy Wow, I have only now realised that my comment got that much attention. I can't share a link in the comments (YT is auto-deleting comments with links) I will be sharing this fixed Dockerfile in my upcoming Next.js starter kit free and open-source project, so make sure to subscribe to not miss out on that :)

[@haiffy]

@@tsykin cool

[@alexrecuenco]

A few other tips 1. `COPY` instructions in general should have `--link` to speed up cache. and prevent a lot of other invalidation 1.5 Do not copy package.json and package-lock.json, instead use the bind instruction. 2. Remember to set the proper folder from npm as cache with --bind for the `npm ci`. (if you do `docker init` the image recommended by docker has this well set) 3. do `npm ci --only=production` and copy those deps. 4. Write a decent .dockerignore that removes files that are not needed NextJS standalone kind of does those things, but the tips here are for any build process, not just NextJS. And nevertheless, I believe like that you would get a result somewhat similar in size to what next js is achieving with the standalone option (but probably with better cache)

[@aderivapodcast]

Can you elaborate on 1.5?

[@tdkrage]

This video is amazing! Thank you so much, Would be great to see how to do this for a monorepo setup with multiple next apps and some shared resources.

[@evmoh_it]

Thank's for video! Good practice to have one repository for production ready multistage build for Next JS in Docker

[@frontendbasics]

If you liked the video, don't forget to subscribe. More videos will come

[@Telmosampaio]

Great tips, exactly what I was looking for 😊

[@halitiince]

Thank you for the video friend❤ IMHO, you are Turkish right? Your edit & concept the best one I have ever seen 🎉

[@frontendbasics]

Yes I am. Glad you liked it ❤️

[@codjix]

hey bro for standalone builds you still need to add .next/static and public folder do it in the builder stage like this after the build command: $ cp -r .next/static .next/standalone/.next $ cp -r public .next/standalone then copy the standalone folder later in the last stage as you do

[@mzerone-g6m]

I am sorry but how is the person make this i do image like this just for developement but for production a 2 phase image one to build application and after that copy build and run using node

[@zorkname]

I think you can make it even smaller with a `node:lts-bullseye-slim` image. It will always use LTS version, and this image feels the best as I've read.

[@putrafajarh]

Does Alpine smaller?

[@zorkname]

@@putrafajarh bullseye is smaller

[@putrafajarh]

@@zorkname i dont know bro, but in my knowledge, bullseye its a version of Debian right? So it should have more bigger size rather than Alpine

[@zorkname]

@@putrafajarh yeah, I confused some stuff a bit. I chose "bullseye-slim" some time ago to ensure everything runs well there (and works the same as locally), as alpine has some differences in compilation and utils.

[@parthadebnath-n3t]

Awsome explanation. Thanks a lot man

[@frontendbasics]

Thanks for the comment ❤️ I am still working on improving my tutorials.

[@dzienisz]

How stable this setup is? And why it’s not recommended?

[@frontendbasics]

I think it is stable enough that Next.js recommends it in their documentation. You can check out these two: nextjs.org/docs/app/api-reference/next-config-js/output github.com/vercel/next.js/tree/canary/examples/with-docker

[@mikami5799]

Why separate dependency install and build into 2 stages?

[@JohnUntivero]

By separating the two stages, you can shorten build times. The first stage (install stage) will only be run whenever you add or remove packages from package.json. This means whenever you run docker build, it'll skip the install stage 99% of the time since it is cached, and go straight into building your application. This is great if you have slower internet speeds or have a large amount of dependencies, saving that 1+ minutes it would take to run "npm install"

[@hvms6k]

Great video! Thanks for sharing. Can I use this approach to develop nextjs web app locally? I mean are there any benefits to create docker image and run it instead of running npm run dev?

[@frontendbasics]

No need for that. You can use npm run dev for local

[@hamadrehman853]

Containerization should be the last step because it makes debugging harder

[@rezanaipospos3320]

I follow your tips, and my next js prisma decrease image size from 2 GB to 600 MB. Thanks

[@abiiranathan]

What's with the zoom in and out?

[@Emre-qp6fk]

Kardeş, thank you very much, I needed it very much.

[@frontendbasics]

Glad you liked it kanki ❤️

[@yusufyalc1n]

@@frontendbasicshuh?

[@reze_dev]

Why we use this instead of vercel?

[@frontendbasics]

If you don’t want to use their platform and host it in anywhere else, docker is the way to go

[@reze_dev]

@@frontendbasics is there a way to deploy container for free?

[@SlickYeet]

Bro with an image size that small, you can run a web app anywhere. Even self host for no charge… Also most free hosting options would easily handle something like this.

[@reze_dev]

@@SlickYeet How? Aws only give 12 month for free tier

[@SlickYeet]

@@reze_dev Oracle has a decent free tier iirc. Google cloud offers a free e2-micro instance which could run a web app. But I recommend getting into self hosting at home, can be complicated at times but you get complete freedom of how you set up your services. Pretty much any old hardware, like an old workstation or even a laptop can suffice to get started with a homelab/self hosted web app. There are plenty of good tutorials and free tools out there to make this easier too.

[@J1ndod1nho]

Great tips, thanks a lot man 👍🏻

[@furkangonulal1355]

Eyvallah, patronları sevindirecek haber :D

[@zakir.nuriiev]

Thank you for a such nice tip!

[@ojfy1267]

hello what a great video to wathc thanks a lot. I have just one question about the public and static folder how can we upload them to CDN or S3, like whats the configurations that should be included to nextjs to make it work?

[@frontendbasics]

You can check out assetPrefix option: nextjs.org/docs/app/api-reference/next-config-js/assetPrefix Basically create a structure where the prefix is your cdn link + the commit hash so that it syncs fine.

[@SharunKumar]

Huh, standalone is the recommended way if you need to deploy it inside docker though

[@RamkrishanYT]

You can't convince me that JavaScript is not a vulnerability created by RAM companies

[@itznotabug]

node-slim?

[@avwie132]

People apparently never read any docs…

[@mikemixsosa4264]

🤣🤣🤣🤣

[@fra4897]

holy shit! thanks a lot!

[@igrb]

amazing stuff

[@frontendbasics]

Thanks for the comment ❤️

[@zenobiusztasak8604]

How it comes that your image weights only 135MB ? My node_modules + .next weights over 1GB. NVM This standalone guy did the job XD

[@danxayota9933]

please could you make a video on dockerize a ready to run expo app image with all the necessary deps to run

[@atovan3236]

this video is helpful

[@bobobo1673]

Amazinh

[@princereyes5400]

how about docker ram usage?

[@frontendbasics]

I haven't search that topic but I think it is highly dependent on what your application consists of and how many requests you are getting per second. Let me know if there are magic tricks for optimizing the ram usage as well.

[@hugodsa89]

I love you

[@okanbayulgen]

türk müsün

[@dantero_]

evet adı onur

[@turculaurentiu91]

I am pretty sure that you are supposed to build the project on your pipeline before building the docker container and only copy only the build in the docker image, don't build it inside the container.