Dockerize Next.js 14+ App in 2024

[@MrAjiii]

Excellent to the point!

[@breads9717]

Excelent and brief content, just what I needed

[@feyzullahyldz4829]

I think we need to add something more. Like sharp library. I will try to add antoher step called sharp. After installing sharp to that stage. I will copy that node_modules to the runner. Lets me it if it works Btw, sharp is a library for image optimization that nextjs uses in production

[@ibrahimmohurlu]

This is awesome exactly what I need. Teşekkürler👍

[@frontendbasics]

Glad you liked it kanki ❤️

[@frontendbasics]

If the video helped, don't forget to subscribe. I am trying to pass 100 subscriptions

[@danielayota26]

Please can you do it for an react native expo app ?

[@denishpatel6038]

Can you make video on how to use this on production, I think it's next stage of this video.

[@arsenico-of3yn]

Hi! I'm deploying a Next.js app in a VPS using docker, but I get this error: Refused to load the font '.....' because it violates the following Content Security Policy directive: "default-src ". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback. I suppose that I need to config the CSP in my Next app, do you know something about it? Thx!

[@johnedet2987]

I will like to see how to deploy it to cloud

[@doob50]

Will this work for local development? Like we can npm install while it’s running and continue developing with hot reload? Thank you! And also, is there anything additional that we will need to do if we decided to use docker-compose for managing two or more separate containers e.g. Next.js, API, and database? 😊

[@frontendbasics]

Yeah you can use your local environment just fine. Using docker compose will not change anything. Thanks for liking the video ❤️

[@sherdilxd]

thank you friend

[@carlosromera6049]

Thanks for your video! I am trying your dockerfile but getting this error: COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static ERROR: failed to solve: failed to compute cache key: failed to calculate checksum of ref 555d9deb-81b6-4ad1-bb93-df9d9b63c37e::8peotbfir0jgxe65p6923yldj: "/app/.next/static": not found Do you kknow what can be happening? Thanks!

[@bmxandcode]

How do you handle others environment variables and secrets, with a docker register like that is on GitHub and deployed in railsway

[@frontendbasics]

If the environment variables will be used for the next.js app, you can copy the environment file directly

[@tamuahmed5303]

Are you building the image to deploy it outside vercel? Also does this image will support SSR, ISR etc.? Thanks.

[@frontendbasics]

Yes exactly. It supports those technologies

[@horssentc]

Thanks!

[@RudySol43]

kardeşim videoların çok güzel ancak bir de şu yaptığın dosyaları her video için github veya sitende blog olarak paylaşsan

[@themanlyman7737]

Almost had a heart attack when I saw the vs code appbar is on the right side

[@frontendbasics]

I highly recommend it! This way, when you close or open the tab bar it doesn’t affect the code editor

[@feyzullahyldz4829]

sharp.js added version. My image size was 151mb, now it is 169mb. # kzbin.info/www/bejne/gofdmoFprqengbc FROM node:18-alpine AS base FROM base AS sharp WORKDIR /app RUN npm init -y RUN npm i sharp@0.33.5 FROM base AS deps RUN apk add --no-cache libc6-compat WORKDIR /app COPY package.json package-lock.json ./ RUN npm ci FROM base AS builder WORKDIR /app COPY --from=deps /app/node_modules ./node_modules COPY . . RUN npm run build FROM base AS runner WORKDIR /app ENV NODE_ENV production RUN addgroup --system --gid 1001 nodejs RUN adduser --system --uid 1001 nextjs COPY --from=builder /app/public ./public RUN mkdir .next RUN chown nextjs:nodejs .next COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./ COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static COPY --from=sharp --chown=nextjs:nodejs /app/node_modules ./node_modules USER nextjs EXPOSE 3000 ENV PORT 3000 CMD HOSTNAME="0.0.0.0" node server.js

[@omarjimenez996]

Thank for that

[@camcommute]

you can get this down much further by using alpine instead of node alpine

[@orangey9139]

Hi, great video btw. Have you tried deleting the node_modules folder in /app after the RUN npm run build? I think that can further reduce the file size, but im having difficulties with it I tried RUN rm -rf node_modules RUN rm -rf ./node_modules RUN rm -rf /app/node_modules none of them worked, can you try this too and see if it reduced size?

[@feyzullahyldz4829]

This question means that you dont know how multistage docker image logic. There is no node_modules in here

[@berndeveloper]

if you have .dockerignore with this data [Dockerfile .dockerignore node_modules npm-debug.log README.md .next .git] you are just ignoring node_modules, so your attempts are useless.