Containerized NextJS frontend

Oct 28, 20242 min read

Pre-Requisites

Project Setup and Frontend Initialization

  1. Create project directory:
   mkdir fullstack-template-5 && cd fullstack-template-5
  1. Create frontend directory:
   mkdir frontend && cd frontend
  1. Initialize the Next.js project with our preferences built into the command (non-interactive in the container):
   docker run --rm -v ${PWD}:/app -w /app \
   node:bookworm \
   npx create-next-app@latest . \
   --typescript \
   --eslint \
   --tailwind \
   --app \
   --src-dir \
   --import-alias "@/*"

or to see options run:

   docker run --rm -v ${PWD}:/app -w /app \
   node:bookworm \
   npx create-next-app@latest --help
  1. Create a Dockerfile.dev:
FROM node:bookworm
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
# https://nextjs.org/telemetry
ENV NEXT_TELEMETRY_DISABLED=1
CMD ["npm", "run", "dev"]

These steps have successfully set up our Next.js frontend environment within a Docker container. We now have a Next.js project with TypeScript, ESLint, Tailwind CSS, and the App Router, along with a Dockerfile for development.

Now let’s test our Dockerfile and setup:

Transclude of next.js-frontend-docker-build-and-run-commands

The default NextJS page is now visible on my browser localhost:3000!

Debug

You may get an error such as: Bind for 0.0.0.0:3000 failed: port is already allocated If so, following commands are useful: Docker cleanup commands

Final Steps for this step

  1. Update ownership of project files (chown)
  2. Push changes to a remote repository - consider Initialize a new GitHub Repo

Filetree state

Our project should currently look like this:

~/projects/fullstack-template
$ tree -L 2
.
└── frontend
    ├── Dockerfile.dev
    ├── next.config.mjs
    ├── next-env.d.ts
    ├── node_modules
    ├── package.json
    ├── package-lock.json
    ├── postcss.config.mjs
    ├── README.md
    ├── src
    ├── tailwind.config.ts
    └── tsconfig.json
 
4 directories, 9 files

Graph View

Backlinks