mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
d7732c57d6
## What? Modernizes the existing `with-docker` example and adds a new `with-docker-export-output` example demonstrating different Next.js deployment strategies with Docker best practices: 1. **`with-docker` (updated)** - Modernized to use App Router, TypeScript, Tailwind CSS v4, and comprehensive Docker best practices. Now includes both Node.js and Bun Dockerfile options, Docker Compose with profiles, BuildKit cache mounts, and extensive documentation. 2. **`with-docker-export-output` (new)** - Demonstrates Next.js static export mode deployment with Docker, offering two serving options: **Nginx** (production-grade) and **serve** package (Node.js-based, simpler setup). Includes optimized Nginx configuration, BuildKit cache mounts, and comprehensive documentation. Both examples include detailed documentation explaining Docker best practices, implementation decisions, and deployment guidance. ## Why? The existing `with-docker` example was using the Pages Router and lacked: - Modern Next.js patterns (App Router, TypeScript) - Detailed documentation explaining Docker best practices and implementation decisions - BuildKit cache mounts for optimized build performance - Bun runtime support as an alternative to Node.js - Docker Compose configurations for easier local development - Clear documentation about Node.js image variant choices (slim vs Alpine) - Examples demonstrating static export mode These updates serve as comprehensive references for developers who want to understand: - How to Dockerize Next.js applications for different deployment scenarios - Why certain choices are made and how to optimize Docker setups for production - When to use standalone mode vs static export mode - How to choose between Node.js and Bun runtimes - How to choose between different web servers (Nginx vs serve) for static sites ## How? ### `with-docker` example (updated) - **Migrated to App Router** with TypeScript and Tailwind CSS v4 - **Multi-stage Dockerfile** with three stages: dependencies installation, build, and runtime - **Bun support** via `Dockerfile.bun` with optimized configuration - **BuildKit cache mounts** for package manager stores (`npm`, `yarn`, `pnpm`, `bun`) and Next.js build cache - **Security best practices** with non-root user execution (built-in `node` and `bun` users) - **Docker Compose configuration** with profiles for Node.js (default) and Bun - **Comprehensive `.dockerignore`** to minimize build context size - **Detailed README** explaining standalone mode benefits, Node.js image choices, and deployment guidance - **Deleted** `with-docker-standalone-output` (merged into this example) ### `with-docker-export-output` example (new) - **Two Dockerfile options:** - `Dockerfile` - Nginx-based serving with `nginxinc/nginx-unprivileged` for security - `Dockerfile.serve` - Node.js serve package-based serving for simpler deployments - **Multi-stage builds** for both options with separate dependency, build, and runtime stages - **BuildKit cache mounts** for package manager stores and Next.js build cache - **Production Nginx configuration** (`nginx.conf`) with gzip compression, caching headers, and security best practices - **Docker Compose configuration** supporting both serving options via profiles - **Comprehensive README** explaining static export mode, trade-offs between Nginx and serve ### Docker best practices implemented (both examples) | Practice | Description | |----------|-------------| | Multi-stage builds | Optimal image size reduction | | Layer caching | Package files copied first | | Minimal build context | Comprehensive `.dockerignore` files | | BuildKit cache mounts | Faster subsequent builds | | Security hardening | Non-root user execution | | Corepack | yarn/pnpm version management | | Package manager auto-detection | npm, yarn, pnpm support | | Node.js 24.13.0-slim | Clear upgrade guidance | ## Breaking Changes > **Warning** > - `with-docker` now uses App Router instead of Pages Router > - `with-docker-standalone-output` has been removed (merged into `with-docker`) --- **Note:** After this PR is approved and merged, I plan to open a follow-up PR to update the Next.js documentation with proper links to these Docker examples. --------- Co-authored-by: Wyatt Johnson <[email protected]> Co-authored-by: Joseph <[email protected]> Co-authored-by: kristiyan.velkov <[email protected]>
233 lines
10 KiB
TypeScript
233 lines
10 KiB
TypeScript
import Link from "next/link";
|
|
import Image from "next/image";
|
|
|
|
export default function Home() {
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-b from-zinc-50 to-white">
|
|
<header
|
|
className="container mx-auto px-4 pt-16 pb-8 text-center"
|
|
aria-labelledby="main-heading"
|
|
>
|
|
<h1 id="main-heading" className="text-5xl font-bold mb-4 text-black">
|
|
Welcome to Next.js on <span className="text-blue-600">Docker</span>!
|
|
</h1>
|
|
<p className="text-xl text-zinc-600 max-w-2xl mx-auto">
|
|
A production-ready example demonstrating how to Dockerize Next.js
|
|
applications using standalone mode.
|
|
</p>
|
|
</header>
|
|
<main className="container mx-auto px-4 pb-16 max-w-6xl">
|
|
<section
|
|
className="grid md:grid-cols-2 gap-8 mb-16"
|
|
aria-label="Features"
|
|
>
|
|
<article className="bg-white rounded-lg p-8 shadow-lg border border-zinc-200">
|
|
<h2 className="text-2xl font-semibold mb-4 text-black">
|
|
Standalone Mode
|
|
</h2>
|
|
<p className="text-zinc-600 mb-4">
|
|
This example showcases Next.js standalone output mode, which
|
|
creates a minimal production build optimized for Docker
|
|
containers.
|
|
</p>
|
|
<ul className="list-disc list-inside space-y-2 text-zinc-600">
|
|
<li>Multi-stage Docker build for optimal image size</li>
|
|
<li>Production-ready configuration</li>
|
|
<li>Security best practices (non-root user)</li>
|
|
<li>BuildKit cache mounts for faster builds</li>
|
|
</ul>
|
|
</article>
|
|
|
|
<article className="bg-white rounded-lg p-8 shadow-lg border border-zinc-200">
|
|
<h2 className="text-2xl font-semibold mb-4 text-black">
|
|
Quick Start
|
|
</h2>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<p className="text-xs text-zinc-500 mb-1">Build the image:</p>
|
|
<code className="block text-sm font-mono bg-zinc-100 p-3 rounded text-zinc-800 break-all">
|
|
docker build -t nextjs-standalone-image .
|
|
</code>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-zinc-500 mb-1">Run the container:</p>
|
|
<code className="block text-sm font-mono bg-zinc-100 p-3 rounded text-zinc-800 break-all">
|
|
docker run -p 3000:3000 nextjs-standalone-image
|
|
</code>
|
|
</div>
|
|
<div className="pt-2 border-t border-zinc-200">
|
|
<p className="text-sm text-zinc-600 mb-2">
|
|
Or use Docker Compose:
|
|
</p>
|
|
<code className="block text-sm font-mono bg-zinc-100 p-3 rounded text-zinc-800 break-all">
|
|
docker compose up
|
|
</code>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-xs text-zinc-500">
|
|
<span>Access at:</span>
|
|
<code className="bg-zinc-100 px-2 py-1 rounded">
|
|
http://localhost:3000
|
|
</code>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
|
|
<section className="mb-12" aria-labelledby="nextjs-resources-heading">
|
|
<h2
|
|
id="nextjs-resources-heading"
|
|
className="text-2xl font-semibold mb-6 text-black text-center"
|
|
>
|
|
Next.js Resources
|
|
</h2>
|
|
<nav
|
|
className="grid md:grid-cols-2 lg:grid-cols-4 gap-6"
|
|
aria-label="Next.js resource links"
|
|
>
|
|
<Link
|
|
href="https://nextjs.org/docs"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="bg-white rounded-lg p-6 shadow-md border border-zinc-200 hover:shadow-lg transition-shadow group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
|
aria-label="Next.js documentation"
|
|
>
|
|
<h3 className="text-lg font-semibold mb-2 text-black group-hover:text-blue-600">
|
|
Documentation →
|
|
</h3>
|
|
<p className="text-zinc-600 text-sm">
|
|
Find in-depth information about Next.js features and API.
|
|
</p>
|
|
</Link>
|
|
|
|
<Link
|
|
href="https://vercel.com/templates?framework=next.js"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="bg-white rounded-lg p-6 shadow-md border border-zinc-200 hover:shadow-lg transition-shadow group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
|
aria-label="Browse Next.js templates"
|
|
>
|
|
<h3 className="text-lg font-semibold mb-2 text-black group-hover:text-blue-600">
|
|
Templates →
|
|
</h3>
|
|
<p className="text-zinc-600 text-sm">
|
|
Browse and deploy Next.js templates to get started quickly!
|
|
</p>
|
|
</Link>
|
|
|
|
<Link
|
|
href="https://github.com/vercel/next.js/tree/canary/examples"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="bg-white rounded-lg p-6 shadow-md border border-zinc-200 hover:shadow-lg transition-shadow group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
|
aria-label="View Next.js examples"
|
|
>
|
|
<h3 className="text-lg font-semibold mb-2 text-black group-hover:text-blue-600">
|
|
Examples →
|
|
</h3>
|
|
<p className="text-zinc-600 text-sm">
|
|
Discover and deploy boilerplate example Next.js projects.
|
|
</p>
|
|
</Link>
|
|
|
|
<Link
|
|
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="bg-white rounded-lg p-6 shadow-md border border-zinc-200 hover:shadow-lg transition-shadow group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
|
aria-label="Deploy to Vercel"
|
|
>
|
|
<h3 className="text-lg font-semibold mb-2 text-black group-hover:text-blue-600">
|
|
Deploy →
|
|
</h3>
|
|
<p className="text-zinc-600 text-sm">
|
|
Instantly deploy your Next.js site to a public URL with Vercel.
|
|
</p>
|
|
</Link>
|
|
</nav>
|
|
</section>
|
|
|
|
<section className="mb-16" aria-labelledby="docker-resources-heading">
|
|
<h2
|
|
id="docker-resources-heading"
|
|
className="text-2xl font-semibold mb-6 text-black text-center"
|
|
>
|
|
Docker Resources
|
|
</h2>
|
|
<nav
|
|
className="grid md:grid-cols-2 lg:grid-cols-4 gap-6"
|
|
aria-label="Docker resource links"
|
|
>
|
|
<Link
|
|
href="https://docs.docker.com/get-started/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="bg-white rounded-lg p-6 shadow-md border border-zinc-200 hover:shadow-lg transition-shadow group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
|
aria-label="Learn Docker fundamentals"
|
|
>
|
|
<h3 className="text-lg font-semibold mb-2 text-black group-hover:text-blue-600">
|
|
Learn Docker →
|
|
</h3>
|
|
<p className="text-zinc-600 text-sm">
|
|
Get started with Docker! Learn fundamentals, containerization,
|
|
and deployment.
|
|
</p>
|
|
</Link>
|
|
<Link
|
|
href="https://docs.docker.com/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="bg-white rounded-lg p-6 shadow-md border border-zinc-200 hover:shadow-lg transition-shadow group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
|
aria-label="Browse Docker documentation"
|
|
>
|
|
<h3 className="text-lg font-semibold mb-2 text-black group-hover:text-blue-600">
|
|
Docker Docs →
|
|
</h3>
|
|
<p className="text-zinc-600 text-sm">
|
|
Comprehensive Docker documentation and reference guides.
|
|
</p>
|
|
</Link>
|
|
|
|
<Link
|
|
href="https://docs.docker.com/language/nodejs/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="bg-white rounded-lg p-6 shadow-md border border-zinc-200 hover:shadow-lg transition-shadow group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
|
aria-label="Read React.js Docker guide"
|
|
>
|
|
<h3 className="text-lg font-semibold mb-2 text-black group-hover:text-blue-600">
|
|
React.js Guide →
|
|
</h3>
|
|
<p className="text-zinc-600 text-sm">
|
|
Official Docker guide for React.js applications following best
|
|
practices for containerization.
|
|
</p>
|
|
</Link>
|
|
</nav>
|
|
</section>
|
|
|
|
<footer className="mt-16 pt-8 border-t border-gray-200">
|
|
<div className="flex flex-col items-center justify-center gap-3 text-gray-600">
|
|
<p className="text-sm">
|
|
<Link
|
|
href="https://nextjs.org"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-1.5 font-medium text-gray-900 hover:text-blue-600 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
|
|
aria-label="Visit Next.js website"
|
|
>
|
|
<Image
|
|
src="/next.svg"
|
|
alt="Next.js"
|
|
width={197}
|
|
height={40}
|
|
className="h-5 w-auto"
|
|
/>
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|