Getting Started (Local Development)

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

---

Dockerfile Explained

This project uses a multi-stage Dockerfile to produce a lean, secure, production-ready image. Here is a breakdown of each stage:

# Stage 1: Install dependencies
FROM node:20-alpine AS deps

• Uses the lightweight Alpine Linux variant of Node 20.
• libc6-compat is installed because some native npm packages require it on Alpine.
• Only package.json and package-lock.json are copied first so Docker can cache the dependency layer — if those files haven't changed, npm ci is skipped on the next build.

# Stage 2: Build the application
FROM node:20-alpine AS builder

• Copies installed node_modules from Stage 1 and the full source code.
• NEXT_TELEMETRY_DISABLED=1 turns off Next.js anonymous telemetry.
• Runs npm run build to produce the optimized .next/standalone output.

# Stage 3: Production runner
FROM node:20-alpine AS runner

• Starts from a fresh Alpine image — nothing from the build stage leaks into the final image (no source code, no dev dependencies, no build cache).
• A non-root system user (nextjs) is created for security best practice — the container never runs as root.
• Only the files actually needed at runtime are copied:
  • public/ — static assets
  • .next/standalone/ — the self-contained server
  • .next/static/ — pre-rendered CSS/JS chunks
• Port 3000 is exposed and the app is started via the standalone server.js that Next.js generates.

Why multi-stage? Each FROM discards everything from the previous stage. The final image ships only the production runtime (~50–80 MB) instead of the full Node + source + dev dependencies (~600 MB+).

---

Running the Docker Image Locally

1. Build the image

docker build -t nextapp:latest .

2. Run the container

docker run -p 3000:3000 nextapp:latest

Open http://localhost:3000 to verify the app is running inside the container.

---

Publishing to Docker Hub

Prerequisites

• A free Docker Hub account.
• Docker installed and running on your machine.

---

1. Log in to Docker Hub

docker login

You will be prompted for your Docker Hub username and password (or Personal Access Token).
To use a token (recommended):

docker login -u yourusername
# Enter your Personal Access Token when prompted

Generate a token at: Docker Hub → Account Settings → Security → New Access Token

---

2. Create a Repository on Docker Hub

1. Go to https://hub.docker.com/ and click Create Repository.
2. Name it nextapp (or any name you prefer).
3. Set visibility to Public or Private.
4. Click Create.

---

3. Understand the Image Tag Format

Docker Hub requires images to be tagged in the following format:

<username>/<repository-name>:<tag>

Part	Example	Description
username	codezelaca	Your Docker Hub username
repository-name	nextapp	The repository you created
tag	latest	Version label (latest, v1.0, v1.0.1, etc.)

---

4. Build Your Image with the Correct Tag

docker build -t yourusername/nextapp:latest .

Replace yourusername with your actual Docker Hub username. Example:

docker build -t codezelaca/nextapp:latest .

To build with an explicit version tag as well:

docker build -t codezelaca/nextapp:v1.0.0 .

---

5. Push the Image to Docker Hub

docker push yourusername/nextapp:latest

Example:

docker push codezelaca/nextapp:latest

If you tagged multiple versions, push each tag separately:

docker push codezelaca/nextapp:v1.0.0

After the push completes, your image is publicly available at:

https://hub.docker.com/r/yourusername/nextapp

---

6. Pull and Run the Image from Docker Hub (anywhere)

Anyone (or any server) can now pull and run your image without needing the source code:

docker pull yourusername/nextapp:latest
docker run -p 3000:3000 yourusername/nextapp:latest

---

Learn More

• Next.js Documentation
• Docker Documentation
• Docker Hub
• Next.js Standalone Output