Skip to main content

Next.js App on Section

Learn how to run a default Next.js app at the edge for low latency and high availability. You can use our repo as a template, or perform the steps yourself using the Kubernetes dashboard or kubectl commands.

Option 1 - Copy Our GitHub Repo

workflow status

Make a new repo from our template: in your browser visit and select Use this template (don't clone, don't fork, but use the template). Choose yourself as an owner, give it a name of your choice, and make it be Public (not Private).

  1. In your new GitHub repo, under Settings > Secrets > Actions, use New repository secret to add these two:
  2. Make any change to pages/index.tsx and watch your changes go live.

Option 2 - Step by Step


  • Docker or equivalent installed
  • A public container repository account (eg GitHub or Docker Hub)
  • (optional) An existing Next.js app
  • (optional) kubectl


  1. Create a Dockerfile
  2. Build & push your container image
  3. Deploy to Section

Creating your Dockerfile

We're assuming you are either using the Section tutorial example, you have your own Next.js app that compiles successfully, or a newly created Next.js app eg:

npx create-next-app@latest

Create a Dockerfile in the root folder of your app. It should sit alongside package.json, eg the following

├── pages
│ ├── index.tsx
│ └── ...
├── public
│ └── ...
├── styles
│ └── ...
├── Dockerfile
├── next.config.js
└── package.json

The Dockerfile's contents should be the following:

FROM node:alpine as dependencies
COPY package.json yarn.lock* package-lock.json* ./
RUN yarn install --frozen-lockfile

FROM node:alpine as builder
COPY . .
COPY --from=dependencies /app/node_modules ./node_modules
RUN yarn build

FROM node:alpine as runner
ENV NODE_ENV production
# If you are using a custom next.config.js file, uncomment this line.
# COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json

CMD ["yarn", "start"]

This script would create a clean build of your Next.js app, and host it on port 3000 when the container is run.

Building the container image

Simply run the following command from the Dockerfile's directory to build and tag your image.

# Replace these example values

docker build . --tag$USER/$IMAGENAME:$TAG

Push your image to a repository

We will be pushing the container image to GitHub for this example. Follow the instructions to do a docker login on your terminal before running the next command.


echo $GITHUB_TOKEN | docker login -u $GITHUB_USER --password-stdin
docker push$USER/$IMAGENAME:$TAG

Deploy to Section

Follow the steps in this doc - Deploy a Project - and simply insert your image name from before (eg:, and specify port 3000.

That's it! Navigate to your project URL and you'll see your Next.js page live.

Next.js demo splash page