create-lumen 2.0.0-alpha.2 → 2.0.0-beta.2

package/templates/conditional/docker/Dockerfile

@@ -0,0 +1,57 @@
+FROM node:22-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json package-lock.json* yarn.lock* pnpm-lock.yaml* bun.lockb* bun.lock* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f bun.lockb ] || [ -f bun.lock ]; then corepack enable bun && bun install --frozen-lockfile; \
+  else npm i; \
+  fi
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --chown=nextjs:nodejs public ./public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+
+CMD ["node", "server.js"]

package/templates/conditional/docker/docker-compose.yml

@@ -0,0 +1,35 @@
+services:
+  app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    restart: always
+    ports:
+      - "3000:3000"
+    environment:
+      - NODE_ENV=production
+      - PORT=3000
+      - DATABASE_URL=postgresql://postgres:postgres@db:5432/app?schema=public
+    depends_on:
+      db:
+        condition: service_healthy
+
+  db:
+    image: postgres:16-alpine
+    restart: always
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
+      POSTGRES_DB: app
+    ports:
+      - "5432:5432"
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U postgres -d app"]
+      interval: 5s
+      timeout: 5s
+      retries: 5
+
+volumes:
+  postgres_data:

package/templates/conditional/linting/biome/biome.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "vcs": {
+    "enabled": false,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "ignore": []
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double"
+    }
+  }
+}

package/templates/conditional/next/config/cloudflare/next.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  /* Cloudflare deployment adapter configuration */
+};
+
+export default nextConfig;

package/templates/conditional/next/config/cloudflare/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* Cloudflare deployment adapter configuration */
+};
+
+export default nextConfig;

package/templates/conditional/next/config/node/next.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: "standalone",
+};
+
+export default nextConfig;

package/templates/conditional/next/config/node/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  output: "standalone",
+};
+
+export default nextConfig;

package/templates/conditional/next/config/static/next.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: "export",
+};
+
+export default nextConfig;

package/templates/conditional/next/config/static/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  output: "export",
+};
+
+export default nextConfig;

package/templates/conditional/next/config/turbopack/next.config.mjs

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  /* Turbopack configuration */
+  turbopack: {},
+};
+
+export default nextConfig;

package/templates/conditional/next/config/turbopack/next.config.ts

@@ -0,0 +1,8 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* Turbopack configuration */
+  turbopack: {},
+};
+
+export default nextConfig;

package/templates/conditional/next/config/vercel/next.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  /* Vercel deployment adapter configuration */
+};
+
+export default nextConfig;

package/templates/conditional/next/config/vercel/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* Vercel deployment adapter configuration */
+};
+
+export default nextConfig;

package/templates/conditional/next/config/webpack/next.config.mjs

@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  /* Webpack configuration */
+  webpack: (config) => {
+    return config;
+  },
+};
+
+export default nextConfig;

package/templates/conditional/next/config/webpack/next.config.ts

@@ -0,0 +1,10 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* Webpack configuration */
+  webpack: (config) => {
+    return config;
+  },
+};
+
+export default nextConfig;

package/templates/conditional/next/font/BUILD_SIZE_NOTE.md

@@ -0,0 +1,17 @@
+# next/font Build Size and Performance Impact
+
+## Zero Layout Shift & Self-Hosting
+`next/font` (specifically `Geist` and `Geist_Mono` via `next/font/google`) automatically optimizes font loading:
+1. **Self-Hosting at Build Time**: Google Fonts are downloaded during `next build` and hosted alongside your static assets directly from the same domain. No external requests are made to Google Fonts servers by the browser at runtime, improving privacy and removing DNS/TLS negotiation latency.
+2. **Zero Cumulative Layout Shift (CLS)**: Uses CSS `size-adjust` to match fallback fonts automatically while custom fonts are loading.
+3. **Preloaded Subsets**: Automatically subsets font glyphs (defaulting to `latin`) to reduce file weight.
+
+## Bundle Footprint
+- **Runtime JavaScript**: ~0 bytes (compiled away into CSS variables and HTML classes).
+- **Static Assets**: ~20-30 KB compressed WOFF2 font payload served statically with aggressive caching (`Cache-Control: public, max-age=31536000, immutable`).
+- **HTML/CSS Injection**: Inline CSS variable definitions (`--font-geist-sans`, `--font-geist-mono`) attached to root wrappers, eliminating render-blocking external stylesheet links.
+
+## Parity Across Routers
+- **App Router**: Wired into root `app/layout.tsx` (or `app/layout.js`) via `className={`${geistSans.variable} ${geistMono.variable}`}` on `<html>`.
+- **Pages Router**: Wired into root `pages/_app.tsx` (or `pages/_app.js`) wrapping the page tree with `${geistSans.variable} ${geistMono.variable}`. (Note: Per Next.js compiler specifications, `next/font` is strictly prohibited inside `pages/_document.js` with a compile-time error and must be loaded in `_app.js` or page components).
+- Both routers expose identical CSS custom properties for global and modular CSS styling.

package/templates/conditional/next/font/app-router/src/app/layout.js

@@ -0,0 +1,25 @@
+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 = {
+  title: "Create Lumen App",
+  description: "Generated by create-lumen",
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en" className={`${geistSans.variable} ${geistMono.variable}`}>
+      <body className="antialiased">{children}</body>
+    </html>
+  );
+}

package/templates/conditional/next/font/app-router/src/app/layout.tsx

@@ -0,0 +1,30 @@
+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: "Create Lumen App",
+  description: "Generated by create-lumen",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className={`${geistSans.variable} ${geistMono.variable}`}>
+      <body className="antialiased">{children}</body>
+    </html>
+  );
+}

package/templates/conditional/next/font/pages-router/src/pages/_app.js

@@ -0,0 +1,20 @@
+import "@/styles/globals.css";
+import { Geist, Geist_Mono } from "next/font/google";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export default function App({ Component, pageProps }) {
+  return (
+    <div className={`${geistSans.variable} ${geistMono.variable}`}>
+      <Component {...pageProps} />
+    </div>
+  );
+}

package/templates/conditional/next/font/pages-router/src/pages/_app.tsx

@@ -0,0 +1,21 @@
+import "@/styles/globals.css";
+import type { AppProps } from "next/app";
+import { Geist, Geist_Mono } from "next/font/google";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <div className={`${geistSans.variable} ${geistMono.variable}`}>
+      <Component {...pageProps} />
+    </div>
+  );
+}

package/templates/conditional/next/font/pages-router/src/pages/_document.js

@@ -0,0 +1,18 @@
+import { Html, Head, Main, NextScript } from "next/document";
+
+/**
+ * Pages Router Custom Document.
+ * Note: Per Next.js compiler specifications, next/font loaders are configured
+ * in pages/_app to avoid the 'Cannot be used within pages/_document' compile error.
+ */
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body className="antialiased">
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

package/templates/conditional/next/font/pages-router/src/pages/_document.tsx

@@ -0,0 +1,18 @@
+import { Html, Head, Main, NextScript } from "next/document";
+
+/**
+ * Pages Router Custom Document.
+ * Note: Per Next.js compiler specifications, next/font loaders are configured
+ * in pages/_app to avoid the 'Cannot be used within pages/_document' compile error.
+ */
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body className="antialiased">
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

package/templates/conditional/next/font/src/app/layout.js

@@ -0,0 +1,25 @@
+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 = {
+  title: "Create Lumen App",
+  description: "Generated by create-lumen",
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en" className={`${geistSans.variable} ${geistMono.variable}`}>
+      <body className="antialiased">{children}</body>
+    </html>
+  );
+}

package/templates/conditional/next/font/src/app/layout.tsx

@@ -0,0 +1,30 @@
+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: "Create Lumen App",
+  description: "Generated by create-lumen",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className={`${geistSans.variable} ${geistMono.variable}`}>
+      <body className="antialiased">{children}</body>
+    </html>
+  );
+}

package/templates/conditional/next/font/src/lib/fonts.js

@@ -0,0 +1,11 @@
+import { Geist, Geist_Mono } from "next/font/google";
+
+export const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+export const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});

package/templates/conditional/next/font/src/lib/fonts.ts

@@ -0,0 +1,11 @@
+import { Geist, Geist_Mono } from "next/font/google";
+
+export const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+export const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});

package/templates/conditional/next/font/src/pages/_app.js

@@ -0,0 +1,20 @@
+import "@/styles/globals.css";
+import { Geist, Geist_Mono } from "next/font/google";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export default function App({ Component, pageProps }) {
+  return (
+    <div className={`${geistSans.variable} ${geistMono.variable}`}>
+      <Component {...pageProps} />
+    </div>
+  );
+}

package/templates/conditional/next/font/src/pages/_app.tsx

@@ -0,0 +1,21 @@
+import "@/styles/globals.css";
+import type { AppProps } from "next/app";
+import { Geist, Geist_Mono } from "next/font/google";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <div className={`${geistSans.variable} ${geistMono.variable}`}>
+      <Component {...pageProps} />
+    </div>
+  );
+}

package/templates/conditional/next/font/src/pages/_document.js

@@ -0,0 +1,18 @@
+import { Html, Head, Main, NextScript } from "next/document";
+
+/**
+ * Pages Router Custom Document.
+ * Note: Per Next.js compiler specifications, next/font loaders are configured
+ * in pages/_app to avoid the 'Cannot be used within pages/_document' compile error.
+ */
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body className="antialiased">
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

package/templates/conditional/next/font/src/pages/_document.tsx

@@ -0,0 +1,18 @@
+import { Html, Head, Main, NextScript } from "next/document";
+
+/**
+ * Pages Router Custom Document.
+ * Note: Per Next.js compiler specifications, next/font loaders are configured
+ * in pages/_app to avoid the 'Cannot be used within pages/_document' compile error.
+ */
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body className="antialiased">
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

package/templates/conditional/next/image/BUILD_SIZE_NOTE.md

@@ -0,0 +1,15 @@
+# next/image Build Size and Performance Impact
+
+## Built-In Optimization
+`next/image` extends standard HTML `<img>` elements with automatic visual stability and performance optimizations:
+1. **Zero Cumulative Layout Shift (CLS)**: Enforces explicit `width` and `height` dimensions or fills the parent container with `fill`, reserving geometric space before the bitmap payload loads.
+2. **Modern Format Negotiation**: Serves WebP and AVIF modern formats dynamically when supported by the requesting browser, yielding 30–50% bandwidth reduction compared to legacy JPEG/PNG.
+3. **Native Lazy Loading**: Viewport-aware on-demand loading so off-screen images do not delay initial page interactivity. The `priority` property allows opting into preloading for Largest Contentful Paint (LCP) elements.
+
+## Bundle Footprint
+- **Runtime JavaScript Overhead**: ~5 KB gzipped client-side runtime handling IntersectionObserver and responsive `srcSet` generation.
+- **Build Impact**: Zero additional build time overhead during static compilation when referencing local SVGs or remote URLs; image transformations are handled on-demand by the Next.js server image optimizer.
+
+## Router Parity
+- **App Router**: Fully compatible with both Server Components (static rendering) and Client Components (`"use client"`).
+- **Pages Router**: Fully compatible with all page and component hierarchies.

package/templates/conditional/next/image/app-router/src/components/ImageExample.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+import Image from "next/image";
+
+export function ImageExample({
+  src = "/next.svg",
+  alt = "Next.js logo",
+  width = 180,
+  height = 37,
+  priority = false,
+  className = "",
+  caption = "Optimized with next/image",
+}) {
+  return (
+    <figure className={`inline-flex flex-col items-center gap-2 p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white/50 dark:bg-black/20 ${className}`}>
+      <div className="relative flex items-center justify-center p-2">
+        <Image
+          src={src}
+          alt={alt}
+          width={width}
+          height={height}
+          priority={priority}
+          className="dark:invert transition-transform hover:scale-105"
+        />
+      </div>
+      {caption && (
+        <figcaption className="text-xs text-gray-500 dark:text-gray-400 text-center font-mono">
+          {caption}
+        </figcaption>
+      )}
+    </figure>
+  );
+}
+
+export default ImageExample;

package/templates/conditional/next/image/app-router/src/components/ImageExample.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import Image from "next/image";
+
+export interface ImageExampleProps {
+  src?: string;
+  alt?: string;
+  width?: number;
+  height?: number;
+  priority?: boolean;
+  className?: string;
+  caption?: string;
+}
+
+export function ImageExample({
+  src = "/next.svg",
+  alt = "Next.js logo",
+  width = 180,
+  height = 37,
+  priority = false,
+  className = "",
+  caption = "Optimized with next/image",
+}: ImageExampleProps) {
+  return (
+    <figure className={`inline-flex flex-col items-center gap-2 p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white/50 dark:bg-black/20 ${className}`}>
+      <div className="relative flex items-center justify-center p-2">
+        <Image
+          src={src}
+          alt={alt}
+          width={width}
+          height={height}
+          priority={priority}
+          className="dark:invert transition-transform hover:scale-105"
+        />
+      </div>
+      {caption && (
+        <figcaption className="text-xs text-gray-500 dark:text-gray-400 text-center font-mono">
+          {caption}
+        </figcaption>
+      )}
+    </figure>
+  );
+}
+
+export default ImageExample;