Skip to main content

Next.js App on CloudFlow

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 https://github.com/section/nextjs-template 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

Prerequisites

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

Steps

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

Creating your Dockerfile

We're assuming you are either using the CloudFlow 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:

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

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

FROM node:alpine as runner
WORKDIR /app
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

EXPOSE 3000
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
USER=cloudflow
IMAGENAME=next
TAG=0.0.1

docker build . --tag ghcr.io/$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.

GITHUB_TOKEN="" # https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token

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

Deploy to CloudFlow

Follow the steps in this doc - Deploy a Project - and simply insert your image name from before (eg: ghcr.io/section/nextdemo:0.0.1), 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