In this article, we will walk through the process of containerizing a Next.js application using Docker and publishing the resulting image to the GitHub Container Registry. This guide is suitable for developers who are familiar with Next.js and Docker and want to streamline their deployment process.

## Prerequisites

Before we begin, ensure you have the following installed on your machine:

- Node.js
- Docker
- A GitHub account

## Step 1: Configure Next.js for Standalone Output

To Dockerize a Next.js application, you need to configure it to output a standalone build. This can be done by adding the following line to your `next.config.ts` file:

```javascript
  output: "standalone"
```

This configuration tells Next.js to generate a standalone build that includes all the necessary files to run the application without relying on the Next.js CLI.

## Step 2: Create a Dockerfile

Next, create a `Dockerfile` in the root of your Next.js project. This file will define the steps to build and run your application inside a Docker container.

```dockerfile
# Use the official Node.js image as the base image
FROM node:22-alpine AS builder

# Set the working directory inside the container
WORKDIR /app

# Copy package.json and package-lock.json (or yarn.lock)
COPY package*.json ./

# Install dependencies
RUN npm install --legacy-peer-deps

# Copy the rest of the application code
COPY . .

# Build the Next.js app
RUN npm run build

# Use a smaller image for the final stage
FROM node:22-alpine AS runner

# Set the working directory
WORKDIR /app

# Copy only the necessary files from the builder stage
COPY --from=builder /app/package*.json ./
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=builder /app/locales ./locales
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/next.config.ts ./

# Expose the port your app runs on (default is 3000 for Next.js)
EXPOSE 3036

# Start the app
CMD ["node", ".next/standalone/server.js"]
```

### Explanation of the Dockerfile

1. **Builder Stage**: 
   - We start with a Node.js Alpine image as the base image.
   - Set the working directory to `/app`.
   - Copy `package.json` and `package-lock.json` to the working directory.
   - Install dependencies using `npm install`.
   - Copy the rest of the application code.
   - Build the Next.js application using `npm run build`.

2. **Runner Stage**:
   - We use a smaller Node.js Alpine image for the final stage to reduce the image size.
   - Set the working directory to `/app`.
   - Copy only the necessary files from the builder stage, including the built application, public assets, locales, node modules, and the Next.js configuration file.
   - Expose port `3036` (or any other port your app runs on).
   - Start the application using `node .next/standalone/server.js`.

## Step 3: Build the Docker Image

Once the Dockerfile is ready, you can build the Docker image using the following command:

```bash
docker build -t ghcr.io/username/image:latest .
```

This command builds the Docker image and tags it with the name `ghcr.io/username/image:latest`.

## Step 4: Publish the Docker Image to GitHub Container Registry

To publish the Docker image to the GitHub Container Registry, use the following command:

```bash
docker push ghcr.io/username/image:latest
```

This command pushes the Docker image to the GitHub Container Registry, making it available for deployment or further use.

## Conclusion

Dockerizing a Next.js application and publishing it to the GitHub Container Registry is a straightforward process that can significantly simplify your deployment workflow. By following the steps outlined in this article, you can ensure that your Next.js application is containerized and ready for deployment in any environment.

---

In this article, we will walk through the process of containerizing a Next.js application using Docker and publishing the resulting image to the GitHub Container Registry.

How to Dockerize a Next.js Application and Publish it to GitHub Container Registry