Here's a complete, beginner-friendly **Docker Tutorial for Tech3Space**

Here's a complete, beginner-friendly Docker Tutorial for Tech3Space – a modern Next.js tech blog/news platform.

This guide shows you how to Dockerize Next.js 16+ App (with Server Components, Client Components, Shadcn/UI, and Tailwind CSS) using a production-optimized multi-stage Dockerfile and docker-compose.yml.

Perfect for local development, production deployment, and SEO-friendly self-hosting of your Tech3Space website.

Why Use Docker for Tech3Space?

• Consistent environment across development, staging, and production
• Easy deployment to VPS, AWS, DigitalOcean, or any cloud
• Smaller, secure, and faster Docker images using standalone output
• Simple orchestration with Docker Compose
• Better scalability and zero "it works on my machine" issues

Step 1: Prepare Your Next.js Project (Important for Small Image Size)

In your tech3space project root, update next.config.ts (or .js):

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone',   // ← This is the KEY for small Docker images
  // ... your other config (images, etc.)
};

export default nextConfig;

Create a .dockerignore file in the root (very important to keep image small):

node_modules
.next
.git
.gitignore
README.md
Dockerfile
.dockerignore

Step 2: Create the Optimized Dockerfile (Multi-Stage Build)

Create a file named Dockerfile in the root of your project:

# syntax=docker/dockerfile:1

# Stage 1: Base
FROM node:22-alpine AS base
WORKDIR /app

# Stage 2: Install dependencies
FROM base AS deps
RUN apk add --no-cache libc6-compat
COPY package.json package-lock.json* ./
RUN npm ci --only=production --frozen-lockfile

# Stage 3: Build the application
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# Build with standalone output
RUN npm run build

# Stage 4: Production runner (smallest possible image)
FROM base AS runner
WORKDIR /app

ENV NODE_ENV=production
ENV PORT=3000
ENV HOSTNAME="0.0.0.0"

# Create non-root user for security
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

# Copy only necessary files from builder
COPY --from=builder /app/public ./public

# Standalone output copies .next/standalone
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

CMD ["node", "server.js"]

Why this multi-stage Dockerfile is best for Next.js + Tech3Space:

• Smaller final image size (~150-300MB instead of 1GB+)
• Faster builds with layer caching
• Secure (runs as non-root user)
• Optimized for production with output: 'standalone'

Step 3: Create docker-compose.yml

Create docker-compose.yml in the root:

version: '3.9'

services:
  tech3space:
    build:
      context: .
      dockerfile: Dockerfile
    image: tech3space:latest
    container_name: tech3space-app
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
      # Add your environment variables here
      # - NEXT_PUBLIC_API_URL=http://your-api.com
    restart: unless-stopped
    healthcheck:
      test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:3000"]
      interval: 30s
      timeout: 10s
      retries: 3

  # Optional: Add PostgreSQL if your Tech3Space uses a database later
  # db:
  #   image: postgres:16-alpine
  #   environment:
  #     POSTGRES_USER: tech3space
  #     POSTGRES_PASSWORD: strongpassword
  #     POSTGRES_DB: tech3space_db
  #   ports:
  #     - "5432:5432"
  #   volumes:
  #     - postgres_data:/var/lib/postgresql/data
  #   restart: unless-stopped

# volumes:
#   postgres_data:

For development (hot reload), you can create a separate docker-compose.dev.yml with volume mounts, but the above is perfect for production.

Step 4: Useful Docker Commands for Tech3Space

Open your terminal in the project root and run these commands:

# 1. Build the Docker image
docker build -t tech3space:latest .

# 2. Build using Docker Compose
docker compose build

# 3. Start the container (production)
docker compose up -d

# 4. View logs
docker compose logs -f

# 5. Stop the container
docker compose down

# 6. Rebuild after code changes
docker compose build --no-cache
docker compose up -d

# 7. Enter the running container (for debugging)
docker exec -it tech3space-app sh

# 8. Remove all stopped containers and unused images (cleanup)
docker system prune -f

After running docker compose up -d, open your browser:
http://localhost:3000 → You should see your Tech3Space homepage with beautiful Shadcn cards and blog posts.

Step 5: Production Deployment Tips (SEO & Performance)

1. On VPS (DigitalOcean, Hetzner, etc.):

   # After SSH into server
   git clone your-repo
   cd tech3space
   docker compose up -d --build
   

2. Use Nginx or Traefik as reverse proxy for custom domain + SSL (Let's Encrypt).

3. Enable ISR (Incremental Static Regeneration) in your pages for better SEO and speed.

4. For even smaller images, use node:22-alpine and pnpm instead of npm.

Bonus: Development vs Production Setup

For local development with hot reload, create docker-compose.dev.yml:

services:
  tech3space:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - /app/node_modules
    command: npm run dev
    environment:
      - NODE_ENV=development

Run with: docker compose -f docker-compose.dev.yml up

You now have a production-ready Docker setup for your Tech3Space Next.js project – fast, secure, easy to deploy, and SEO-optimized.