rayan/next.js
1
0
Fork 0
Code Issues Pull Requests Actions 12 Packages Projects Releases Wiki Activity

first commit
Some checks failed
Test examples / Test Examples (20) (push) Has been cancelled
Details
Test examples / Test Examples (22) (push) Has been cancelled
Details
Lock Threads / action (push) Has been cancelled
Details
Trigger Release / start (push) Has been cancelled
Details
Stale issue handler / stale (push) Has been cancelled
Details
Update Font Data / create-pull-request (push) Has been cancelled
Details
build-and-deploy / deploy-target (push) Has been cancelled
Details
build-and-deploy / build (push) Has been cancelled
Details
build-and-deploy / stable - aarch64-unknown-linux-musl - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - x86_64-unknown-linux-musl - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - aarch64-unknown-linux-gnu - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - x86_64-unknown-linux-gnu - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - aarch64-pc-windows-msvc - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - x86_64-pc-windows-msvc - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - aarch64-apple-darwin - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - x86_64-apple-darwin - node@16 (push) Has been cancelled
Details
build-and-deploy / build-wasm (nodejs) (push) Has been cancelled
Details
build-and-deploy / build-wasm (web) (push) Has been cancelled
Details
build-and-deploy / Deploy preview tarball (push) Has been cancelled
Details
build-and-deploy / Potentially publish release (push) Has been cancelled
Details
build-and-deploy / publish-turbopack-npm-packages (push) Has been cancelled
Details
build-and-deploy / Deploy examples (push) Has been cancelled
Details
build-and-deploy / thank you, build (push) Has been cancelled
Details
build-and-deploy / Upload Turbopack Bytesize metrics to Datadog (push) Has been cancelled
Details
Rspack Next.js development integration tests / Rspack integration tests (push) Has been cancelled
Details
Rspack Next.js production integration tests / Rspack integration tests (push) Has been cancelled
Details
Turbopack Next.js development integration tests / Next.js integration tests (push) Has been cancelled
Details
Turbopack Next.js production integration tests / Next.js integration tests (push) Has been cancelled
Details
Update Rspack test manifest / Update and upload Rspack development test manifest (push) Has been cancelled
Details
Update Rspack test manifest / Update and upload Rspack production test manifest (push) Has been cancelled
Details
Upload bundler test manifests to areweturboyet.com / Upload test results (push) Has been cancelled
Details
Update React / create-pull-request (push) Has been cancelled
Details
test-e2e-project-reset-cron / reset-test-project (push) Has been cancelled
Details
Notify about the top 15 issues/PRs/feature requests (most reacted) in the last 90 days / run (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Arian Tron
2026-03-10 19:37:31 +03:30
commit 61f56f997c
27684 changed files with 2784175 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
examples/with-docker/app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

26
examples/with-docker/app/globals.css Normal file
View File

@@ -0,0 +1,26 @@
@import "tailwindcss";
:root {
--background: #ffffff;
--foreground: #171717;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
body {
background: var(--background);
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
}

55
examples/with-docker/app/layout.tsx Normal file
View File

@@ -0,0 +1,55 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Next.js Docker Example - Standalone Mode",
description:
"A production-ready example demonstrating how to Dockerize Next.js applications using standalone mode.",
keywords: [
"Next.js",
"Docker",
"standalone mode",
"containerization",
"React",
"Node.js",
],
openGraph: {
title: "Next.js Docker Example - Standalone Mode",
description:
"A production-ready example demonstrating how to Dockerize Next.js applications using standalone mode.",
type: "website",
},
twitter: {
card: "summary_large_image",
title: "Next.js Docker Example - Standalone Mode",
description:
"A production-ready example demonstrating how to Dockerize Next.js applications using standalone mode.",
},
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
</html>
);
}

232
examples/with-docker/app/page.tsx Normal file
View File

@@ -0,0 +1,232 @@
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>
);
}