Cutting Down Docker Image Sizes: Next.js Standalone Mode for Easy Kubernetes Deployments on EKS and AKS

alessandrorodrigo

Alessandro Rodrigo

Posted on June 24, 2024

Cutting Down Docker Image Sizes: Next.js Standalone Mode for Easy Kubernetes Deployments on EKS and AKS

A Developer's Deployment Dilemma

So, you are all geared up and brimming with excitement to launch your newest and greatest super cool Next.js app. Except that Docker images are just too bloated, and everything becomes slow. How frustrating deployment delays are, correct? What if I told you there's a way to trim that Docker image fat and get your app running smoothly on Kubernetes, whether you're using AWS EKS or Azure AKS? Say hello to Next.js standalone mode!

My Experience with Standalone Mode

I experienced firsthand the impact of Next.js standalone mode while working on a project at my last company. Our Docker images for Next.js were over 1 GB, which caught my manager's attention. I was tasked with investigating and optimizing the images. Implementing standalone mode drastically reduced the size of our Docker images, leading to faster builds and smoother deployments. This improvement was crucial in streamlining our deployment process and resolving the issues with oversized images.

Getting to Know Next.js Standalone Mode

The Lean, Mean, Deployment Machine

Next.js standalone mode is like that magical suitcase that only packs what you need. This excellent feature helps to create a minimal build of your app, cutting all the unneeded stuff and keeping the Docker image lean and mean.

What's the Story with Standalone Mode?

It's all about efficiency. Standalone mode strips your Next.js build down to what's essential for production.

To begin, just update your next.config.js to look like this:

module.exports = {
  output: 'standalone',
}
Enter fullscreen mode Exit fullscreen mode

How It Works

When you run the next build, Next.js compiles an absolute bare minimum into a .next/standalone folder.

Why Standalone Mode Rocks for Docker Deployments

Bye-Bye, Bloat!

Let's think about your Docker image like you feel about your carry-on luggage. The less you pack, the easier your travels. Without any extras, Standalone mode makes your Docker image much more minor.

  • Smaller images mean faster builds and quicker deployments. Less waiting, more doing.
  • Without extra dependencies, your build process gets a serious boost. You're not just building faster—you're deploying smarter.
  • Keep It Secure: Fewer files and dependencies mean fewer potential security issues. It's like having a smaller, safer surface area.
Crafting the Perfect Dockerfile

Your Dockerfile is like a recipe for your app. And with standalone mode, you streamline it for the best results. Here is a hyper-optimized Dockerfile setup:

# Stage 1: Build
FROM node:18-alpine AS builder
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile
COPY . .
RUN yarn build

# Stage 2: Production Image
FROM node:18-alpine
WORKDIR /app
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next/static ./public/static
EXPOSE 3000
CMD ["node", "server.js"]
Enter fullscreen mode Exit fullscreen mode

This configuration utilizes a multi-stage build, which keeps your final image clean and small, making the end users happy. With your streamlined Docker image, it’s a breeze.

Here's how you can set it up on EKS or AKS:

Deployment YAML Example
Copy code
apiVersion: apps/v1
kind: Deployment
metadata:
  name: nextjs-app
spec:
  replicas: 3
  selector:
    matchLabels:
      app: nextjs
  template:
    metadata:
      labels:
        app: nextjs
    spec:
      containers:
      - name: nextjs
        image: <your-registry>/nextjs-app:latest
        ports:
        - containerPort: 3000
---
apiVersion: v1
kind: Service
metadata:
  name: nextjs-service
spec:
  type: LoadBalancer
  ports:
  - port: 80
    targetPort: 3000
  selector:
    app: nextjs
Enter fullscreen mode Exit fullscreen mode
The Benefits in Action

Once your app's up and running, you'll see the real magic.

  • Resource-Friendly: Smaller images mean you spend fewer resources, just what is needed to cut costs.
  • Faster, More Efficient Updates: Smaller images pull faster, and updates go faster. Say goodbye to those long waits during deployment.
  • Network-Friendly: Your slim images use less bandwidth, making the whole process efficient.
Conclusion: Your Deployment Superpower

Deploying apps does not have to be a headache. This improves your Docker image size and build times to allow you to ship faster with Next.js standalone mode. Standalone mode can be combined with your secret weapon in the toolkit during deployment. So next time, when deploying, don't forget: Standalone mode for compact, highly effective, and quickly implemented Docker deployments. Try it out and see how it changes your deployment process!

Go on learning more about Next.js:
💖 💪 🙅 🚩
alessandrorodrigo
Alessandro Rodrigo

Posted on June 24, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related