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