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

package/templates/bases/next/pages-router/ts/src/pages/404.tsx

@@ -0,0 +1,35 @@
+import Head from "next/head";
+import Link from "next/link";
+
+export default function Custom404() {
+  return (
+    <>
+      <Head>
+        <title>404 - Page Not Found</title>
+      </Head>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          minHeight: "100vh",
+          fontFamily: "var(--font-geist-sans, sans-serif)",
+          padding: "2rem",
+          textAlign: "center",
+        }}
+      >
+        <h1>404 - Page Not Found</h1>
+        <p style={{ marginTop: "1rem" }}>
+          The page you are looking for does not exist.
+        </p>
+        <Link
+          href="/"
+          style={{ marginTop: "1.5rem", textDecoration: "underline" }}
+        >
+          Go back home
+        </Link>
+      </div>
+    </>
+  );
+}

package/templates/bases/next/pages-router/ts/src/pages/500.tsx

@@ -0,0 +1,35 @@
+import Head from "next/head";
+import Link from "next/link";
+
+export default function Custom500() {
+  return (
+    <>
+      <Head>
+        <title>500 - Server Error</title>
+      </Head>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          minHeight: "100vh",
+          fontFamily: "var(--font-geist-sans, sans-serif)",
+          padding: "2rem",
+          textAlign: "center",
+        }}
+      >
+        <h1>500 - Server-side error occurred</h1>
+        <p style={{ marginTop: "1rem" }}>
+          Something went wrong on our end.
+        </p>
+        <Link
+          href="/"
+          style={{ marginTop: "1.5rem", textDecoration: "underline" }}
+        >
+          Go back home
+        </Link>
+      </div>
+    </>
+  );
+}

package/templates/bases/next/pages-router/ts/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/bases/next/pages-router/ts/src/pages/_document.tsx

@@ -0,0 +1,15 @@
+import { Html, Head, Main, NextScript } from "next/document";
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

package/templates/bases/next/pages-router/ts/src/pages/api/hello.ts

@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from "next";
+
+type Data = {
+  hello: string;
+};
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>,
+) {
+  res.status(200).json({ hello: "lumen" });
+}

package/templates/bases/next/pages-router/ts/src/pages/blog/[slug].tsx

@@ -0,0 +1,46 @@
+import type { GetServerSideProps, InferGetServerSidePropsType } from "next";
+import Head from "next/head";
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+export const getServerSideProps: GetServerSideProps<{ slug: string }> = async (
+  context,
+) => {
+  const slug = (context.params?.slug as string) || "";
+  return {
+    props: {
+      slug,
+    },
+  };
+};
+
+export default function BlogPost({
+  slug,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
+  const router = useRouter();
+  const displaySlug = slug || (router.query.slug as string) || "";
+
+  return (
+    <>
+      <Head>
+        <title>{displaySlug}</title>
+      </Head>
+      <main
+        style={{
+          padding: "2rem",
+          fontFamily: "var(--font-geist-sans, sans-serif)",
+          maxWidth: "800px",
+          margin: "0 auto",
+        }}
+      >
+        <h1>{displaySlug}</h1>
+        <p style={{ marginTop: "1rem" }}>Post slug: {displaySlug}</p>
+        <p style={{ marginTop: "1.5rem" }}>
+          <Link href="/" style={{ textDecoration: "underline" }}>
+            Back to home
+          </Link>
+        </p>
+      </main>
+    </>
+  );
+}

package/templates/bases/next/pages-router/ts/src/pages/index.tsx

@@ -0,0 +1,77 @@
+import Head from "next/head";
+import Image from "next/image";
+import styles from "@/styles/Home.module.css";
+
+export default function Home() {
+  return (
+    <>
+      <Head>
+        <title>Create Next App</title>
+        <meta name="description" content="Generated by create next app" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+      </Head>
+      <div className={styles.page}>
+        <main className={styles.main}>
+          <Image
+            className={styles.logo}
+            src="/next.svg"
+            alt="Next.js logo"
+            width={100}
+            height={20}
+            priority
+          />
+          <div className={styles.intro}>
+            <h1>
+              To get started, edit the{" "}
+              <code className={styles.code}>index.tsx</code> file.
+            </h1>
+            <p>
+              Looking for a starting point or more instructions? Head over to{" "}
+              <a
+                href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Templates
+              </a>{" "}
+              or the{" "}
+              <a
+                href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Learning
+              </a>{" "}
+              center.
+            </p>
+          </div>
+          <div className={styles.ctas}>
+            <a
+              className={styles.primary}
+              href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Image
+                className={styles.logo}
+                src="/vercel.svg"
+                alt="Vercel logomark"
+                width={16}
+                height={14}
+              />
+              Deploy Now
+            </a>
+            <a
+              className={styles.secondary}
+              href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Documentation
+            </a>
+          </div>
+        </main>
+      </div>
+    </>
+  );
+}

package/templates/bases/next/pages-router/ts/src/styles/Home.module.css

@@ -0,0 +1,149 @@
+.page {
+  --background: #fafafa;
+  --foreground: #fff;
+
+  --text-primary: #000;
+  --text-secondary: #666;
+
+  --button-primary-hover: #383838;
+  --button-secondary-hover: #f2f2f2;
+  --button-secondary-border: #ebebeb;
+
+  display: flex;
+  min-height: 100vh;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-geist-sans);
+  background-color: var(--background);
+}
+
+.main {
+  display: flex;
+  min-height: 100vh;
+  width: 100%;
+  max-width: 800px;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  background-color: var(--foreground);
+  padding: 120px 60px;
+}
+
+.intro {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  text-align: left;
+  gap: 24px;
+}
+
+.intro h1 {
+  max-width: 320px;
+  font-size: 40px;
+  font-weight: 600;
+  line-height: 48px;
+  letter-spacing: -2.4px;
+  text-wrap: balance;
+  color: var(--text-primary);
+}
+
+.intro p {
+  max-width: 440px;
+  font-size: 18px;
+  line-height: 32px;
+  text-wrap: balance;
+  color: var(--text-secondary);
+}
+
+.intro a {
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.ctas {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  max-width: 440px;
+  gap: 16px;
+  font-size: 14px;
+}
+
+.ctas a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+  padding: 0 16px;
+  border-radius: 128px;
+  border: 1px solid transparent;
+  transition: 0.2s;
+  cursor: pointer;
+  width: fit-content;
+  font-weight: 500;
+}
+
+a.primary {
+  background: var(--text-primary);
+  color: var(--background);
+  gap: 8px;
+}
+
+a.secondary {
+  border-color: var(--button-secondary-border);
+}
+
+/* Enable hover only on non-touch devices */
+@media (hover: hover) and (pointer: fine) {
+  a.primary:hover {
+    background: var(--button-primary-hover);
+    border-color: transparent;
+  }
+
+  a.secondary:hover {
+    background: var(--button-secondary-hover);
+    border-color: transparent;
+  }
+}
+
+@media (max-width: 600px) {
+  .main {
+    padding: 48px 24px;
+  }
+
+  .intro {
+    gap: 16px;
+  }
+
+  .intro h1 {
+    font-size: 32px;
+    line-height: 40px;
+    letter-spacing: -1.92px;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .logo {
+    filter: invert();
+  }
+
+  .page {
+    --background: #000;
+    --foreground: #000;
+
+    --text-primary: #ededed;
+    --text-secondary: #999;
+
+    --button-primary-hover: #ccc;
+    --button-secondary-hover: #1a1a1a;
+    --button-secondary-border: #1a1a1a;
+  }
+}
+
+.code {
+  font-family: var(--font-geist-mono);
+  font-size: 0.9em;
+  background: color-mix(in srgb, currentColor 8%, transparent);
+  padding: 0.1em 0.4em;
+  border-radius: 6px;
+}

package/templates/bases/next/pages-router/ts/src/styles/globals.css

@@ -0,0 +1,42 @@
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+}

package/templates/bases/next/pages-router/ts/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}

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>
+  );
+}