Dockerize your Next.JS application
Learn to use Docker for packaging your Next.JS app for testing or deployment for staging or production
You’ve designed, coded, tested, and now have a fully working Next.JS website in your localhost… Great! So… How do I deploy this to production?
That is probably one of the most common questions when you work with Next.JS. The complexity of having a Front-End framework that can essentially, at the same time, behave as a Back-End server, requires you to change your mindset of how a website gets deployed.
Docker can help us packaging our Next.JS application and make it portable to accomplish a number of tasks such as testing in a specific environment, sharing your build with other developers, and, of course, deploying to staging, UAT or even a production server.
Configuring, and especially securing, a Docker container is a complicated task, however, consider this a primer to deploying Docker apps. Later on, you can expand the setup for your deployment.
Creating a simple Next.JS application
Let’s begin by creating a very simple Next.JS application.
Create a package.json, this one will work, with only a minimal set of packages (next, react and react-dom):
Install your dependencies:
npm iWe are going to create a silly little site with the first few lines of three fantasy books. There is going to be a random picture from Unsplash to add a little color to the page.
First, let’s create the pages, starting with our home page:
Our second page, Alice in Wonderland:
Then, Peter Pan (Peter and Wendy):
And lastly a Journey to the Centre of the Earth:
We are going to need to create an _app.jsx page to import the global CSS styles.
Now, let’s create a component for our pages, in this case, a Navigation component:
Finally, let’s create some simple styles for our app:
At this point, if you run the dev script:
npm run devYou’ll get this multicolored site which you can navigate within these four pages featuring books and excerpts from them:
Configure your Dockerfile
Let’s create our Docker configuration file.
Notice we are building off the image from node:alpine and exposing our up through port 3000.
Building your Docker image
You are all set up to build your Docker image, we’ll call it “client”. You can do so with the following command:
docker build -t client .After running the previous line in your terminal, you’ll see the 8 steps running for building your container.
Deploying your Docker container
Consider now that you want to browse the pages build in your container, for this you’ll need to run the container built and then bind a port from your container to your local environment.
docker build -t client . && docker run --name CLIENT_CONTAINER -p 0.0.0.0:5000:3000 clientIn this case, we’ve matched port 5000 in our host to port 3000 (which is the one we are exposing in our container). This makes us being able to navigate to http://localhost:5000 and get this:
Expanding your application, extending security
Now that you have a successful container of a working application, there are a few things you need to turn your attention to. To name a few:
- Security: make sure to keep not only your Next.JS code safe, but also implement the latest security patches for all the packages your site and containers depend on.
- Continuous integration and deployment (CI/CD): major cloud hosting services nowadays provide tools that you can use to deploy your Docker containers either by command line or through third-party tools, such as Github or Gitlab.
What’s Next and Further Reading
Next.Js provides great opportunities to expand and empower a React application. Please read further these articles on the series:
Further reading:
