Next.js Portfolio Template with Docker

Modern portfolio website template built with Next.js, Tailwind CSS, and Docker.

Features

• Next.js 14+ with App Router
• Tailwind CSS for styling
• Docker multi-stage builds
• PNPM package manager
• Production-ready configuration
• Contact form component
• Responsive design

Core Dependencies

• Next.js 14 (App Router)
• React 18
• Tailwind CSS 3
• PNPM 8
• TypeScript 5
• Lucide React Icons
• PostCSS 8

Configuration Files

Git Configuration

.gitignore

node_modules/
.next/
.env*
.DS_Store
*.pem
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*
.vercel

Docker Configuration

.dockerignore

node_modules
.next
.git
.env*

docker-compose.yml (Production)

version: '3.8'
services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "805:805"
    environment:
      - NODE_ENV=production
      - PORT=805
    restart: unless-stopped

docker-compose.dev.yml (Development)

version: '3.8'
services:
  web-dev:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - /app/node_modules
      - /app/.next
    environment:
      - NODE_ENV=development
    command: pnpm dev

Development Setup

1. Install PNPM: corepack enable && corepack prepare pnpm@latest --activate
2. Install dependencies: pnpm install
3. Run development server: docker compose -f docker-compose.dev.yml up

Production Deployment

1. Build and run: docker compose up -d
2. Access site on port 805

Portainer Deployment Steps

1. Add stack in Portainer
2. Configure GitHub repository access
3. Set compose path to docker-compose.yml
4. Deploy and monitor through Portainer UI

Project Structure

• /src/app - Next.js pages and routes
• /src/components - Reusable React components
• /src/styles - Global styles and Tailwind config

Best Practices

• Use PNPM for consistent dependency management
• Follow Next.js App Router patterns
• Maintain separate Docker configurations for dev/prod
• Keep sensitive data in .env files (not in repository)
• Use multi-stage builds for production