Self-host your supastarter for Next.js 14 app with Docker

In this guide, we are going to show you, how you can easily self-host your supastarter for Next.js 14 application from a Turborepo with Docker.

This guide can also be applied to any other Next.js app inside a Turborepo. Just make sure to check that the defined paths match your project.

You can find a working example of this on the feature/docker-deploy branch in the supastarter repository.

Why self-host a Next.js app?

Self-hosting your Next.js app allows you to have complete control over your server environment. It ensures better privacy, contributes to cost savings if managed correctly, and offers you the flexibility to customize your server setup to suit your specific needs. It can also give your application a performance boost compared to hosting on a serverless platform like Vercel, since it removes cold starts.

Setup Next.js app for docker deployment

To get started we first need to configure our Next.js app to be built as a standalone app, so we can later run the application in a docker container. To do so, add the following config to your apps/web/next.config.js :

module.exports = {
  //...
  output: "standalone",
};

Setup docker configuration for the Next.js app

Next, create a Dockerfile in the root of your Next.js app (apps/web/Dockerfile) with the following content:

FROM node:18-alpine AS base
ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable

FROM base AS builder
RUN apk add --no-cache libc6-compat
RUN apk update
WORKDIR /app
RUN pnpm add -g turbo
COPY . .
RUN turbo prune web --docker

FROM base AS installer
RUN apk add --no-cache libc6-compat
RUN apk update
WORKDIR /app

COPY .gitignore .gitignore
COPY --from=builder /app/out/json/ .
COPY --from=builder /app/out/pnpm-lock.yaml ./pnpm-lock.yaml
ENV CYPRESS_INSTALL_BINARY=0
RUN pnpm install

COPY --from=builder /app/out/full/ .
COPY turbo.json turbo.json

RUN pnpm turbo run build --filter=web...

FROM base AS runner
WORKDIR /app

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs
USER nextjs

COPY --from=installer /app/apps/web/next.config.js .
COPY --from=installer /app/apps/web/package.json .

COPY --from=installer --chown=nextjs:nodejs /app/apps/web/.next/standalone ./
COPY --from=installer --chown=nextjs:nodejs /app/apps/web/.next/static ./apps/web/.next/static
COPY --from=installer --chown=nextjs:nodejs /app/apps/web/public ./apps/web/public

USER nextjs

EXPOSE 3000

ENV PORT 3000
ENV HOSTNAME "0.0.0.0"

CMD ["node", "apps/web/server.js"]

In the root of the supastarter project, also add a .dockerignore file with the following content:

Dockerfile
.dockerignore
node_modules
**/node_modules
npm-debug.log
README.md
.next
.git

And that’s all the changes necessary! Now you can build your app as a docker image and deploy it anywhere you can run docker images.

Running your app locally with Docker

If you have Docker installed on your local machine and want to run your Next.js app there for testing the docker image, simply run the following commands from your project’s root:

docker build -f apps/web/Dockerfile . --no-cache -t supastarter-docker
docker run -p 3000:3000 supastarter-docker

To fully use the application, you need to pass the necessary environment variables you have defined in your .env.local file to the container.

Deploying your application to Fly.io

To deploy your application with Docker to fly.io simply install the Fly CLI and run the following command from your project’s root:

fly launch --dockerfile apps/web/Dockerfile

Follow the steps in the CLI and configure the used port to 3000 in the deployment configuration and you should have a running instance of your app within a few minutes on fly.io.