Pre-Requisites
Project Setup and Frontend Initialization
- Create project directory:
mkdir fullstack-template-5 && cd fullstack-template-5
- Create frontend directory:
mkdir frontend && cd frontend
- 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
- 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
- Update ownership of project files (chown)
- 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