How To Containerize a Next.js App and Deploy to Kinsta
Next prompts you to specify a number of configuration options for your new app. For this tutorial, you can simply accept the suggested defaults.
To preview your new application, navigate to the new-app directory and run:
Features such as containerized apps on GCP infrastructure running on C2 machines with 35 data centers available, premium integration with Cloudflare for a high-performance CDN that serves your site from 260+ Points of Presence, enterprise-level firewall DDoS protection, Edge Caching, and uptime monitoring (with 99% uptime guarantee), ensure your app runs fast, secure, and is reliably available to the internet.
With Kinsta, you can deploy your applications automatically by using Buildpacks and Nixpacks. But when the build process is automatically triggered based on your app’s codebase, you don’t have a lot of room for customizations. If you deploy to Kinsta with a Dockerfile, you can configure precisely how you want to build and deploy your application.
Requirements
FROM node:18-alpine AS build
WORKDIR /app
Copy the package.json and package-lock.json files to the container:
You have a lot of benefits from containerizing an application, such as portability, stability, scalability, security, and performance. By deploying an app to Kinsta with a Dockerfile, you also leverage its customizability.
Portability
FROM node:18-alpine AS runtime
Set the working directory to /app:
In this article, we discussed a few advantages of using Docker over traditional models; we explained how to create a Dockerfile for a Next.js app, build and deploy it with Docker locally, and deploy it to Kinsta.
COPY --from=build /app/public ./public
Expose port 3000:
WORKDIR /app
Copy the package.json and package-lock.json files to the container:
npm i -g create-next-app@latest
Navigate to the directory where you want to install it and create a new Next.js application in its own directory:
By running your app in an isolated container, you have predictable results when moving code between development, test, and production systems. Given that your container contains exact versions of necessary libraries and packages, it minimizes the risk of bugs due to different dependency revisions.
Kinsta’s application hosting makes your development workflow effortless and efficient.
COPY package*.json ./
Install the app dependencies with:
FROM node:18-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
FROM node:18-alpine AS runtime
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY --from=build /app/.next ./.next
COPY --from=build /app/public ./public
EXPOSE 3000
USER node
CMD ["npm", "start"]
Deploy the App Locally With Docker
For this tutorial, we assume you have a basic understanding of Next.js and Docker.
Start With a Next.js Application
To containerize an application, we use a declarative method through a Dockerfile. Docker reads and executes the scripts defined in this file to build and deploy your application.
Advantages of Containerizing Your Application
docker run -p 3000:3000 next-docker
On your browser, open http://localhost:3000.
Deploy the Containerized Next.js App to Kinsta
npm run dev
Create the runtime stage to deploy your application:
Use the official latest stable Node.js alpine image as the base image for the runtime stage:
USER node
Start the Next.js app:
RUN npm ci --only=production
Copy the built app from the build stage to the runtime stage:
With Docker, you can run several instances of your container on different servers. Container orchestrators handle increased traffic without affecting your app’s performance.
Stability
docker build -t next-docker .
Run the container to preview your app:
RUN npm ci
Copy the rest of the application code to the container with:
COPY package*.json ./
Install only production dependencies:
Follow the steps below to deploy your application to Kinsta using its Dockerfile.
Host your app’s codebase on a Git repository (on GitHub, GitLab, or Bitbucket).
Log into your MyKinsta account or create a new one to access your dashboard.
Click Add service and select Application.
Select your Git provider, repository, and the branch you want to deploy from.
Check the Automatic deployment on commit checkbox if you’d like to deploy your app at every push to your repo.
Select the data center closest to your audience and click Continue.
Choose your build environment and select Use Dockerfile to set up container image.
If your Dockerfile isn’t in your repo’s root, use Context to indicate its path and click Continue.
You can leave the Start command entry empty. Kinsta uses npm start to start your application.
Select the pod size and number of instances best suited for your app and click Continue.
Fill out your credit card information and click Create application.
If you are starting from an existing application, you can skip this step. If you are starting fresh, create a new Next.js application:
Open your terminal and install create-next-app:
Get started with a free trial of our Application Hosting or Database Hosting. Explore our plans or talk to sales to find your best fit.
Amin Choroomi
Although you can still preview your application with run npm dev, run it locally with Docker to mimic the production environment and to test and preview any changes you make to your app’s Dockerfile.
Docker encapsulates everything an application needs to run, allowing them to be commuted easily between environments. Whether you are running it locally, on a computer with a different operating system, or in staging and production environments, Docker builds the application with the same components, making it easier to code, test, and deploy.
