How to Dockerize and Deploy a Next.js App to GitHub Container Registry

Picture of the author

Ian Mungai

Apr 14, 2022


Are you a Next.js enthusiast wanting to leverage GitHub’s shiny Container Registry for your application deployment? If so, you’re in the right place! This guide will walk you through the process in a few easy steps.

What is GitHub Container Registry?

Before diving in, it’s crucial to understand what GitHub Container Registry is. Essentially, it’s a service from GitHub that allows you to host and manage Docker container images within your GitHub repository, making it easier to automate and streamline the deployment process.

Step-by-step Guide to Deployment

1. Crafting the Dockerfile

Your first step is to set up the Docker context for your Next.js project. Here’s a basic Dockerfile to get you started:

FROM node:14
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD [ "npm", "start" ]

This script sets up a Node.js environment, installs your app’s dependencies, and gets it ready to run.

2. Building the Image

Once your Dockerfile is ready, create your Docker image:

docker build -t ghcr.io/USERNAME/REPOSITORY_NAME:TAG_NAME .

Remember to replace placeholders with your project-specific details.

3. Pushing to the Registry

Before pushing your Docker image, authenticate with the GitHub Container Registry:

echo $GH_TOKEN | docker login ghcr.io -u USERNAME --password-stdin

Then, you’re ready to push:

docker push ghcr.io/USERNAME/REPOSITORY_NAME:TAG_NAME

4. Deployment

With your image now on GitHub’s Container Registry, deploying it is just a matter of pulling the image from the registry and deploying it to your preferred cloud service or server.

5. A Tip on Visibility

By default, your Docker images on GitHub are private. If sharing is your intent, adjust the visibility settings from your GitHub repository under the “Packages” tab.

In Conclusion

Using GitHub Container Registry can simplify your Next.js deployment process, especially if you’re already entrenched in the GitHub ecosystem. As always, ensure your images are free of sensitive data before pushing, especially if making them public. Happy deploying!


Subscribe now!

Get latest news in regards to tech.

We wont spam you. Promise.

Application Image

Have An Awesome App Idea. Let us turn it to reality.

Book a Free Discovery Call

Contact Us

© 2024 Otherside Limited. All rights reserved.