145 lines
3.7 KiB
HTML
145 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Next.js Portfolio Template with Docker</title>
|
|
<style>
|
|
body {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
line-height: 1.6;
|
|
}
|
|
pre {
|
|
background: #f6f8fa;
|
|
padding: 16px;
|
|
border-radius: 6px;
|
|
overflow-x: auto;
|
|
}
|
|
code {
|
|
font-family: monospace;
|
|
background: #f6f8fa;
|
|
padding: 2px 4px;
|
|
border-radius: 3px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Next.js Portfolio Template with Docker</h1>
|
|
|
|
<p>Modern portfolio website template built with Next.js, Tailwind CSS, and Docker.</p>
|
|
|
|
<h2>Features</h2>
|
|
<ul>
|
|
<li>Next.js 14+ with App Router</li>
|
|
<li>Tailwind CSS for styling</li>
|
|
<li>Docker multi-stage builds</li>
|
|
<li>PNPM package manager</li>
|
|
<li>Production-ready configuration</li>
|
|
<li>Contact form component</li>
|
|
<li>Responsive design</li>
|
|
</ul>
|
|
|
|
<h2>Core Dependencies</h2>
|
|
<ul>
|
|
<li>Next.js 14 (App Router)</li>
|
|
<li>React 18</li>
|
|
<li>Tailwind CSS 3</li>
|
|
<li>PNPM 8</li>
|
|
<li>TypeScript 5</li>
|
|
<li>Lucide React Icons</li>
|
|
<li>PostCSS 8</li>
|
|
</ul>
|
|
|
|
<h2>Configuration Files</h2>
|
|
|
|
<h3>Git Configuration</h3>
|
|
<h4>.gitignore</h4>
|
|
<pre><code>node_modules/
|
|
.next/
|
|
.env*
|
|
.DS_Store
|
|
*.pem
|
|
npm-debug.log*
|
|
yarn-debug.log*
|
|
yarn-error.log*
|
|
.pnpm-debug.log*
|
|
.vercel</code></pre>
|
|
|
|
<h3>Docker Configuration</h3>
|
|
<h4>.dockerignore</h4>
|
|
<pre><code>node_modules
|
|
.next
|
|
.git
|
|
.env*</code></pre>
|
|
|
|
<h4>docker-compose.yml (Production)</h4>
|
|
<pre><code>version: '3.8'
|
|
services:
|
|
web:
|
|
build:
|
|
context: .
|
|
dockerfile: Dockerfile
|
|
ports:
|
|
- "805:805"
|
|
environment:
|
|
- NODE_ENV=production
|
|
- PORT=805
|
|
restart: unless-stopped</code></pre>
|
|
|
|
<h4>docker-compose.dev.yml (Development)</h4>
|
|
<pre><code>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</code></pre>
|
|
|
|
<h2>Development Setup</h2>
|
|
<ol>
|
|
<li>Install PNPM: <code>corepack enable && corepack prepare pnpm@latest --activate</code></li>
|
|
<li>Install dependencies: <code>pnpm install</code></li>
|
|
<li>Run development server: <code>docker compose -f docker-compose.dev.yml up</code></li>
|
|
</ol>
|
|
|
|
<h2>Production Deployment</h2>
|
|
<ol>
|
|
<li>Build and run: <code>docker compose up -d</code></li>
|
|
<li>Access site on port 805</li>
|
|
</ol>
|
|
|
|
<h2>Portainer Deployment Steps</h2>
|
|
<ol>
|
|
<li>Add stack in Portainer</li>
|
|
<li>Configure GitHub repository access</li>
|
|
<li>Set compose path to docker-compose.yml</li>
|
|
<li>Deploy and monitor through Portainer UI</li>
|
|
</ol>
|
|
|
|
<h2>Project Structure</h2>
|
|
<ul>
|
|
<li><code>/src/app</code> - Next.js pages and routes</li>
|
|
<li><code>/src/components</code> - Reusable React components</li>
|
|
<li><code>/src/styles</code> - Global styles and Tailwind config</li>
|
|
</ul>
|
|
|
|
<h2>Best Practices</h2>
|
|
<ul>
|
|
<li>Use PNPM for consistent dependency management</li>
|
|
<li>Follow Next.js App Router patterns</li>
|
|
<li>Maintain separate Docker configurations for dev/prod</li>
|
|
<li>Keep sensitive data in .env files (not in repository)</li>
|
|
<li>Use multi-stage builds for production</li>
|
|
</ul>
|
|
</body>
|
|
</html>
|