Deploying a Next.js App using Standalone Output Type with Docker and Helm Charts – The One Where Your App Gets Deployed

Next.js is a popular React-based framework for building server-side rendered (SSR) and static web applications. Just like Joey, it’s versatile and always there for you. One of the ways to deploy a Next.js app is to use the standalone output type, which allows you to run your app as a single standalone executable file. Sort of like Ross with his fossils, your app will stand strong on its own. In this article, we’ll look at how to deploy a Next.js app using the standalone output type with Docker and Helm charts.

First, let’s create a Docker image for our Next.js app. We’ll use a multi-stage build to minimize the image size and improve security. In the first stage, we’ll use a Node.js image to build our app, and in the second stage, we’ll use a smaller Alpine-based image to run our app.

Here’s an example Dockerfile:

# First stage: build the app
FROM node:14 AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# Second stage: run the app
FROM node:14-alpine
WORKDIR /app
COPY --from=builder /app/out/ .
EXPOSE 3000
CMD [ "npm", "start" ]

In this Dockerfile, we’re using the Node.js v14 image as both the builder and runtime environment. We’re copying our app files and installing the dependencies in the first stage, and then copying the built app from the first stage to the second stage. It’s like Chandler and Joey moving from their old apartment to their new one, but for code! We’re exposing port 3000, which is the default port for Next.js, and running the app using the npm start command. Easy peasy.

Now that we have a Docker image, we can deploy our app using Helm charts. Helm is a package manager for Kubernetes that makes it easy to manage and deploy applications. It’s like Phoebe’s guitar, it helps you manage and create beautiful things. To deploy our Next.js app, we’ll create a Helm chart that defines the resources we need to run our app, such as a deployment, a service, and a ingress.

Here’s an example Helm chart:

apiVersion: v2
name: nextjs-app
description: A Helm chart for deploying a Next.js app

# Define the resources for our app
resources:
  - deployment.yaml
  - service.yaml
  - ingress.yaml

# Define the values for our chart
values:
  image:
    repository: nextjs-app
    tag: latest

  service:
    type: ClusterIP
    port: 3000

  ingress:
    host: nextjs-app.local
    path: /

In this Helm chart, we’re defining a deployment, a service, and an ingress to run our app. We’re also defining the values for our chart, such as the Docker image repository and tag, the service type and port, and the ingress host and path

To deploy our Next.js app, we simply need to run the following command in the directory where our Helm chart is located:

helm install nextjs-app .

And that’s it! Our Next.js app will be deployed to our Kubernetes cluster, and we can access it using the URL defined in the ingress.

Just like how Monica always had a clean apartment, our Next.js app will be deployed in a clean and organized manner using Docker and Helm charts. No more worries about inconsistencies in different environments, or manual deployment processes. Deploying your Next.js app using the standalone output type with Docker and Helm charts is a great way to ensure that your app is deployed consistently and efficiently.