add nextjs frontend and backend

.changeset/olive-rules-buy.md

@@ -0,0 +1,5 @@
+---
+"create-better-t-stack": minor
+---
+
+add nextjs frontend and backend

apps/cli/src/helpers/env-setup.ts

@@ -51,13 +51,14 @@ export async function setupEnvironmentVariables(
 	const hasReactRouter = options.frontend.includes("react-router");
 	const hasTanStackRouter = options.frontend.includes("tanstack-router");
 	const hasTanStackStart = options.frontend.includes("tanstack-start");
+	const hasNextJs = options.frontend.includes("next");
 	const hasWebFrontend =
-		hasReactRouter || hasTanStackRouter || hasTanStackStart;
+		hasReactRouter || hasTanStackRouter || hasTanStackStart || hasNextJs;
 
 	let corsOrigin = "http://localhost:3000";
 	if (hasReactRouter) {
 		corsOrigin = "http://localhost:5173";
-	} else if (hasTanStackRouter || hasTanStackStart) {
+	} else if (hasTanStackRouter || hasTanStackStart || hasNextJs) {
 		corsOrigin = "http://localhost:3001";
 	}
 
@@ -114,9 +115,15 @@ export async function setupEnvironmentVariables(
 
 	if (hasWebFrontend) {
 		const clientDir = path.join(projectDir, "apps/web");
+		let envVarName = "VITE_SERVER_URL";
+
+		if (hasNextJs) {
+			envVarName = "NEXT_PUBLIC_SERVER_URL";
+		}
+
 		const clientVars: EnvVariable[] = [
 			{
-				key: "VITE_SERVER_URL",
+				key: envVarName,
 				value: "http://localhost:3000",
 				condition: true,
 			},

apps/cli/src/helpers/runtime-setup.ts

@@ -8,6 +8,10 @@ export async function setupRuntime(
 	runtime: ProjectRuntime,
 	backendFramework: ProjectBackend,
 ): Promise<void> {
+	if (backendFramework === "next") {
+		return;
+	}
+
 	const serverDir = path.join(projectDir, "apps/server");
 	const serverIndexPath = path.join(serverDir, "src/index.ts");
 

apps/cli/src/helpers/template-manager.ts

@@ -51,9 +51,10 @@ export async function setupFrontendTemplates(
 	const hasTanstackWeb = frontends.includes("tanstack-router");
 	const hasTanstackStart = frontends.includes("tanstack-start");
 	const hasReactRouterWeb = frontends.includes("react-router");
+	const hasNextWeb = frontends.includes("next");
 	const hasNative = frontends.includes("native");
 
-	if (hasTanstackWeb || hasReactRouterWeb || hasTanstackStart) {
+	if (hasTanstackWeb || hasReactRouterWeb || hasTanstackStart || hasNextWeb) {
 		const webDir = path.join(projectDir, "apps/web");
 		await fs.ensureDir(webDir);
 
@@ -62,20 +63,35 @@ export async function setupFrontendTemplates(
 			await fs.copy(webBaseDir, webDir);
 		}
 
-		let frameworkName = "web-react-router";
 		if (hasTanstackWeb) {
-			frameworkName = "web-tanstack-router";
+			const frameworkDir = path.join(
+				PKG_ROOT,
+				"template/base/apps/web-tanstack-router",
+			);
+			if (await fs.pathExists(frameworkDir)) {
+				await fs.copy(frameworkDir, webDir, { overwrite: true });
+			}
 		} else if (hasTanstackStart) {
-			frameworkName = "web-tanstack-start";
+			const frameworkDir = path.join(
-		}
+				PKG_ROOT,
-
+				"template/base/apps/web-tanstack-start",
-		const webFrameworkDir = path.join(
+			);
-			PKG_ROOT,
+			if (await fs.pathExists(frameworkDir)) {
-			`template/base/apps/${frameworkName}`,
+				await fs.copy(frameworkDir, webDir, { overwrite: true });
-		);
+			}
-
+		} else if (hasReactRouterWeb) {
-		if (await fs.pathExists(webFrameworkDir)) {
+			const frameworkDir = path.join(
-			await fs.copy(webFrameworkDir, webDir, { overwrite: true });
+				PKG_ROOT,
+				"template/base/apps/web-react-router",
+			);
+			if (await fs.pathExists(frameworkDir)) {
+				await fs.copy(frameworkDir, webDir, { overwrite: true });
+			}
+		} else if (hasNextWeb) {
+			const frameworkDir = path.join(PKG_ROOT, "template/base/apps/web-next");
+			if (await fs.pathExists(frameworkDir)) {
+				await fs.copy(frameworkDir, webDir, { overwrite: true });
+			}
 		}
 
 		const packageJsonPath = path.join(webDir, "package.json");
@@ -105,6 +121,28 @@ export async function setupBackendFramework(
 	projectDir: string,
 	framework: ProjectBackend,
 ): Promise<void> {
+	if (framework === "next") {
+		const serverDir = path.join(projectDir, "apps/server");
+		const nextTemplateDir = path.join(
+			PKG_ROOT,
+			"template/with-next/apps/server",
+		);
+
+		await fs.ensureDir(serverDir);
+
+		if (await fs.pathExists(nextTemplateDir)) {
+			await fs.copy(nextTemplateDir, serverDir, { overwrite: true });
+
+			const packageJsonPath = path.join(serverDir, "package.json");
+			if (await fs.pathExists(packageJsonPath)) {
+				const packageJson = await fs.readJson(packageJsonPath);
+				packageJson.name = "server";
+				await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 });
+			}
+		}
+		return;
+	}
+
 	const frameworkDir = path.join(PKG_ROOT, `template/with-${framework}`);
 	if (await fs.pathExists(frameworkDir)) {
 		await fs.copy(frameworkDir, projectDir, { overwrite: true });
@@ -161,8 +199,14 @@ export async function setupAuthTemplate(
 		const hasReactRouter = frontends.includes("react-router");
 		const hasTanStackRouter = frontends.includes("tanstack-router");
 		const hasTanStackStart = frontends.includes("tanstack-start");
+		const hasNextRouter = frontends.includes("next");
 
-		if (hasReactRouter || hasTanStackRouter || hasTanStackStart) {
+		if (
+			hasReactRouter ||
+			hasTanStackRouter ||
+			hasTanStackStart ||
+			hasNextRouter
+		) {
 			const webDir = path.join(projectDir, "apps/web");
 
 			const webBaseAuthDir = path.join(authTemplateDir, "apps/web-base");
@@ -199,6 +243,13 @@ export async function setupAuthTemplate(
 					await fs.copy(tanstackStartAuthDir, webDir, { overwrite: true });
 				}
 			}
+
+			if (hasNextRouter) {
+				const nextAuthDir = path.join(authTemplateDir, "apps/web-next");
+				if (await fs.pathExists(nextAuthDir)) {
+					await fs.copy(nextAuthDir, webDir, { overwrite: true });
+				}
+			}
 		}
 
 		const serverAuthDir = path.join(authTemplateDir, "apps/server/src");
@@ -216,30 +267,73 @@ export async function setupAuthTemplate(
 			{ overwrite: true },
 		);
 
-		const contextFileName = `with-${framework}-context.ts`;
+		if (framework === "next") {
-		await fs.copy(
+			if (
-			path.join(serverAuthDir, "lib", contextFileName),
+				await fs.pathExists(
-			path.join(projectServerDir, "lib/context.ts"),
+					path.join(authTemplateDir, "apps/server/src/with-next-app"),
-			{ overwrite: true },
+				)
-		);
+			) {
-
+				const nextAppAuthDir = path.join(
-		const indexFileName = `with-${framework}-index.ts`;
+					authTemplateDir,
-		await fs.copy(
+					"apps/server/src/with-next-app",
-			path.join(serverAuthDir, indexFileName),
-			path.join(projectServerDir, "index.ts"),
-			{ overwrite: true },
-		);
-
-		const authLibFileName = getAuthLibDir(orm, database);
-		const authLibSourceDir = path.join(serverAuthDir, authLibFileName);
-		if (await fs.pathExists(authLibSourceDir)) {
-			const files = await fs.readdir(authLibSourceDir);
-			for (const file of files) {
-				await fs.copy(
-					path.join(authLibSourceDir, file),
-					path.join(projectServerDir, "lib", file),
-					{ overwrite: true },
 				);
+				const nextAppDestDir = path.join(projectDir, "apps/server/src/app");
+
+				await fs.ensureDir(nextAppDestDir);
+
+				const files = await fs.readdir(nextAppAuthDir);
+				for (const file of files) {
+					const srcPath = path.join(nextAppAuthDir, file);
+					const destPath = path.join(nextAppDestDir, file);
+					await fs.copy(srcPath, destPath, { overwrite: true });
+				}
+			}
+
+			const contextFileName = "with-next-context.ts";
+			await fs.copy(
+				path.join(serverAuthDir, "lib", contextFileName),
+				path.join(projectServerDir, "lib/context.ts"),
+				{ overwrite: true },
+			);
+
+			const authLibFileName = getAuthLibDir(orm, database);
+			const authLibSourceDir = path.join(serverAuthDir, authLibFileName);
+			if (await fs.pathExists(authLibSourceDir)) {
+				const files = await fs.readdir(authLibSourceDir);
+				for (const file of files) {
+					await fs.copy(
+						path.join(authLibSourceDir, file),
+						path.join(projectServerDir, "lib", file),
+						{ overwrite: true },
+					);
+				}
+			}
+		} else {
+			const contextFileName = `with-${framework}-context.ts`;
+			await fs.copy(
+				path.join(serverAuthDir, "lib", contextFileName),
+				path.join(projectServerDir, "lib/context.ts"),
+				{ overwrite: true },
+			);
+
+			const indexFileName = `with-${framework}-index.ts`;
+			await fs.copy(
+				path.join(serverAuthDir, indexFileName),
+				path.join(projectServerDir, "index.ts"),
+				{ overwrite: true },
+			);
+
+			const authLibFileName = getAuthLibDir(orm, database);
+			const authLibSourceDir = path.join(serverAuthDir, authLibFileName);
+			if (await fs.pathExists(authLibSourceDir)) {
+				const files = await fs.readdir(authLibSourceDir);
+				for (const file of files) {
+					await fs.copy(
+						path.join(authLibSourceDir, file),
+						path.join(projectServerDir, "lib", file),
+						{ overwrite: true },
+					);
+				}
 			}
 		}
 

apps/cli/src/index.ts

@@ -90,6 +90,7 @@ async function main() {
 					"tanstack-router",
 					"react-router",
 					"tanstack-start",
+					"next",
 					"native",
 					"none",
 				],
@@ -128,7 +129,7 @@ async function main() {
 			.option("backend", {
 				type: "string",
 				describe: "Backend framework",
-				choices: ["hono", "express", "elysia"],
+				choices: ["hono", "express", "next", "elysia"],
 			})
 			.option("runtime", {
 				type: "string",

apps/cli/src/prompts/backend-framework.ts

@@ -16,6 +16,11 @@ export async function getBackendFrameworkChoice(
 				label: "Hono",
 				hint: "Lightweight, ultrafast web framework",
 			},
+			{
+				value: "next",
+				label: "Next.js",
+				hint: "Full-stack framework with API routes",
+			},
 			{
 				value: "express",
 				label: "Express",

apps/cli/src/prompts/config-prompts.ts

@@ -52,7 +52,8 @@ export async function gatherConfig(
 			},
 			frontend: () => getFrontendChoice(flags.frontend),
 			backend: () => getBackendFrameworkChoice(flags.backend),
-			runtime: () => getRuntimeChoice(flags.runtime),
+			runtime: ({ results }) =>
+				getRuntimeChoice(flags.runtime, results.backend),
 			database: () => getDatabaseChoice(flags.database),
 			orm: ({ results }) =>
 				getORMChoice(flags.orm, results.database !== "none", results.database),

apps/cli/src/prompts/frontend-option.ts

@@ -27,7 +27,8 @@ export async function getFrontendChoice(
 			(f) =>
 				f === "tanstack-router" ||
 				f === "react-router" ||
-				f === "tanstack-start",
+				f === "tanstack-start" ||
+				f === "next",
 		)
 			? ["web"]
 			: [],
@@ -54,6 +55,11 @@ export async function getFrontendChoice(
 					label: "React Router",
 					hint: "A user‑obsessed, standards‑focused, multi‑strategy router",
 				},
+				{
+					value: "next",
+					label: "Next.js",
+					hint: "The React Framework for the Web",
+				},
 				{
 					value: "tanstack-start",
 					label: "TanStack Start (beta)",
@@ -65,7 +71,8 @@ export async function getFrontendChoice(
 					(f) =>
 						f === "tanstack-router" ||
 						f === "react-router" ||
-						f === "tanstack-start",
+						f === "tanstack-start" ||
+						f === "next",
 				) || "tanstack-router",
 		});
 

apps/cli/src/prompts/runtime.ts

@@ -1,13 +1,18 @@
 import { cancel, isCancel, select } from "@clack/prompts";
 import pc from "picocolors";
 import { DEFAULT_CONFIG } from "../constants";
-import type { ProjectRuntime } from "../types";
+import type { ProjectBackend, ProjectRuntime } from "../types";
 
 export async function getRuntimeChoice(
 	runtime?: ProjectRuntime,
+	backend?: ProjectBackend,
 ): Promise<ProjectRuntime> {
 	if (runtime !== undefined) return runtime;
 
+	if (backend === "next") {
+		return "node";
+	}
+
 	const response = await select<ProjectRuntime>({
 		message: "Select runtime",
 		options: [

apps/cli/src/types.ts

@@ -13,13 +13,14 @@ export type ProjectAddons =
 	| "husky"
 	| "starlight"
 	| "none";
-export type ProjectBackend = "hono" | "elysia" | "express";
+export type ProjectBackend = "hono" | "elysia" | "express" | "next";
 export type ProjectRuntime = "node" | "bun";
 export type ProjectExamples = "todo" | "ai" | "none";
 export type ProjectFrontend =
 	| "react-router"
 	| "tanstack-router"
 	| "tanstack-start"
+	| "next"
 	| "native"
 	| "none";
 export type ProjectDBSetup =

apps/cli/template/base/apps/server/_gitignore

@@ -1,22 +1,32 @@
 # prod
 dist/
+/build
+/out/
 
 # dev
 .yarn/
+!.yarn/patches
+!.yarn/plugins
 !.yarn/releases
+!.yarn/versions
 .vscode/*
 !.vscode/launch.json
 !.vscode/*.code-snippets
 .idea/workspace.xml
 .idea/usage.statistics.xml
 .idea/shelf
+.wrangler
+/.next/
+.vercel
 
 # deps
 node_modules/
-.wrangler
+/node_modules
+/.pnp
+.pnp.*
 
 # env
-.env
+.env*
 .env.production
 .dev.vars
 
@@ -31,6 +41,11 @@ lerna-debug.log*
 
 # misc
 .DS_Store
+*.pem
 
 # local db
 *.db*
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/cli/template/base/apps/web-base/_gitignore

@@ -1,26 +1,52 @@
-# Local
+# Dependencies
-.DS_Store
+/node_modules
-*.local
+/.pnp
-*.log*
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
 
-# Dist
+# Testing
-node_modules
+/coverage
-dist/
+
+# Build outputs
+/.next/
+/out/
+/build/
+/dist/
 .vinxi
 .output
+.react-router/
+
+# Deployment
 .vercel
 .netlify
 .wrangler
 
+# Environment & local files
+.env*
+!.env.example
+.DS_Store
+*.pem
+*.local
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+*.log*
+
+# TypeScript
+*.tsbuildinfo
+next-env.d.ts
+
 # IDE
 .vscode/*
 !.vscode/extensions.json
 .idea
 
-*.env*
+# Other
-!.env.example
-
 dev-dist
-
-/.react-router/
-/build/

apps/cli/template/base/apps/web-base/src/index.css

@@ -4,7 +4,7 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
-  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
+  --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, sans-serif,
     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 

apps/cli/template/base/apps/web-next/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/cli/template/base/apps/web-next/next.config.ts

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

apps/cli/template/base/apps/web-next/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "web",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack --port=3001",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.1.5",
+    "@radix-ui/react-dropdown-menu": "^2.1.7",
+    "@radix-ui/react-label": "^2.1.3",
+    "@radix-ui/react-slot": "^1.2.0",
+    "@tanstack/react-form": "^1.3.2",
+    "@tanstack/react-query": "^5.72.2",
+    "@trpc/client": "^11.1.0",
+    "@trpc/tanstack-react-query": "^11.1.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.487.0",
+    "next": "15.3.0",
+    "next-themes": "^0.4.6",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "sonner": "^2.0.3",
+    "tailwind-merge": "^3.2.0",
+    "tw-animate-css": "^1.2.5",
+    "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@tanstack/react-query-devtools": "^5.72.2",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

apps/cli/template/base/apps/web-next/postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;

apps/cli/template/base/apps/web-next/src/app/layout.tsx

@@ -0,0 +1,41 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "../index.css";
+import Providers from "@/components/providers";
+import Header from "@/components/header";
+
+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 Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <Providers>
+          <div className="grid grid-rows-[auto_1fr] h-svh">
+            <Header />
+            {children}
+          </div>
+        </Providers>
+      </body>
+    </html>
+  );
+}

apps/cli/template/base/apps/web-next/src/app/page.tsx

@@ -0,0 +1,83 @@
+"use client"
+import { trpc } from "@/utils/trpc";
+import { useQuery } from "@tanstack/react-query";
+
+const TITLE_TEXT = `
+ ██████╗ ███████╗████████╗████████╗███████╗██████╗
+ ██╔══██╗██╔════╝╚══██╔══╝╚══██╔══╝██╔════╝██╔══██╗
+ ██████╔╝█████╗     ██║      ██║   █████╗  ██████╔╝
+ ██╔══██╗██╔══╝     ██║      ██║   ██╔══╝  ██╔══██╗
+ ██████╔╝███████╗   ██║      ██║   ███████╗██║  ██║
+ ╚═════╝ ╚══════╝   ╚═╝      ╚═╝   ╚══════╝╚═╝  ╚═╝
+
+ ████████╗    ███████╗████████╗ █████╗  ██████╗██╗  ██╗
+ ╚══██╔══╝    ██╔════╝╚══██╔══╝██╔══██╗██╔════╝██║ ██╔╝
+    ██║       ███████╗   ██║   ███████║██║     █████╔╝
+    ██║       ╚════██║   ██║   ██╔══██║██║     ██╔═██╗
+    ██║       ███████║   ██║   ██║  ██║╚██████╗██║  ██╗
+    ╚═╝       ╚══════╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝
+ `;
+
+export default function Home() {
+  const healthCheck = useQuery(trpc.healthCheck.queryOptions());
+
+  return (
+    <div className="container mx-auto max-w-3xl px-4 py-2">
+      <pre className="overflow-x-auto font-mono text-sm">{TITLE_TEXT}</pre>
+      <div className="grid gap-6">
+        <section className="rounded-lg border p-4">
+          <h2 className="mb-2 font-medium">API Status</h2>
+          <div className="flex items-center gap-2">
+            <div
+              className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
+            />
+            <span className="text-sm text-muted-foreground">
+              {healthCheck.isLoading
+                ? "Checking..."
+                : healthCheck.data
+                  ? "Connected"
+                  : "Disconnected"}
+            </span>
+          </div>
+        </section>
+
+        <section>
+          <h2 className="mb-3 font-medium">Core Features</h2>
+          <ul className="grid grid-cols-2 gap-3">
+            <FeatureItem
+              title="Type-Safe API"
+              description="End-to-end type safety with tRPC"
+            />
+            <FeatureItem
+              title="Modern React"
+              description="TanStack Router + TanStack Query"
+            />
+            <FeatureItem
+              title="Fast Backend"
+              description="Lightweight Hono server"
+            />
+            <FeatureItem
+              title="Beautiful UI"
+              description="TailwindCSS + shadcn/ui components"
+            />
+          </ul>
+        </section>
+      </div>
+    </div>
+  );
+}
+
+function FeatureItem({
+  title,
+  description,
+}: {
+  title: string;
+  description: string;
+}) {
+  return (
+    <li className="border-l-2 border-primary py-1 pl-3">
+      <h3 className="font-medium">{title}</h3>
+      <p className="text-sm text-muted-foreground">{description}</p>
+    </li>
+  );
+}

apps/cli/template/base/apps/web-next/src/components/header.tsx

@@ -0,0 +1,30 @@
+"use client"
+import Link from "next/link";
+import { ModeToggle } from "./mode-toggle";
+
+export default function Header() {
+  const links = [
+    { to: "/", label: "Home" },
+  ];
+
+  return (
+    <div>
+      <div className="flex flex-row items-center justify-between px-2 py-1">
+        <nav className="flex gap-4 text-lg">
+          {links.map(({ to, label }) => (
+            <Link
+              key={to}
+              href={to}
+            >
+              {label}
+            </Link>
+          ))}
+        </nav>
+        <div className="flex items-center gap-2">
+          <ModeToggle />
+        </div>
+      </div>
+      <hr />
+    </div>
+  );
+}

apps/cli/template/base/apps/web-next/src/components/mode-toggle.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function ModeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

apps/cli/template/base/apps/web-next/src/components/providers.tsx

@@ -0,0 +1,25 @@
+"use client"
+import { QueryClientProvider } from "@tanstack/react-query";
+import { queryClient } from "@/utils/trpc";
+import { ThemeProvider } from "./theme-provider";
+import { Toaster } from "./ui/sonner";
+
+export default function Providers({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+    >
+      <QueryClientProvider client={queryClient}>
+        {children}
+      </QueryClientProvider>
+      <Toaster richColors />
+    </ThemeProvider>
+  )
+}

apps/cli/template/base/apps/web-next/src/components/theme-provider.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

apps/cli/template/base/apps/web-next/src/utils/trpc.ts

@@ -0,0 +1,33 @@
+import { QueryCache, QueryClient } from '@tanstack/react-query';
+import { createTRPCClient, httpBatchLink } from '@trpc/client';
+import { createTRPCOptionsProxy } from '@trpc/tanstack-react-query';
+import type { AppRouter } from '../../../server/src/routers';
+import { toast } from 'sonner';
+
+export const queryClient = new QueryClient({
+  queryCache: new QueryCache({
+    onError: (error) => {
+      toast.error(error.message, {
+        action: {
+          label: "retry",
+          onClick: () => {
+            queryClient.invalidateQueries();
+          },
+        },
+      });
+    },
+  }),
+});
+
+const trpcClient = createTRPCClient<AppRouter>({
+  links: [
+    httpBatchLink({
+      url: `${process.env.NEXT_PUBLIC_SERVER_URL}/api/trpc`,
+    }),
+  ],
+})
+
+export const trpc = createTRPCOptionsProxy<AppRouter>({
+  client: trpcClient,
+  queryClient,
+});

apps/cli/template/base/apps/web-next/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "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,
+    "verbatimModuleSyntax": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["./next-env.d.ts", "./**/*.ts", "./**/*.tsx", "./.next/types/**/*.ts"],
+  "exclude": ["./node_modules"]
+}

apps/cli/template/base/apps/web-tanstack-start/src/index.css

@@ -1,135 +0,0 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-
-@custom-variant dark (&:where(.dark, .dark *));
-
-@theme {
-  --font-sans:
-    "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-}
-
-html,
-body {
-  @apply bg-white dark:bg-gray-950;
-
-  @media (prefers-color-scheme: dark) {
-    color-scheme: dark;
-  }
-}
-
-:root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-}
-
-@theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}

apps/cli/template/with-auth/apps/server/src/lib/with-next-context.ts

@@ -0,0 +1,14 @@
+import type { NextRequest } from "next/server";
+import { auth } from "./auth";
+
+export async function createContext(req: NextRequest) {
+  const session = await auth.api.getSession({
+    headers: req.headers,
+  });
+
+  return {
+    session,
+  };
+}
+
+export type Context = Awaited<ReturnType<typeof createContext>>;

apps/cli/template/with-auth/apps/server/src/with-next-app/api/auth/[...all]/route.ts

@@ -0,0 +1,4 @@
+import { auth } from "@/lib/auth";
+import { toNextJsHandler } from "better-auth/next-js";
+
+export const { GET, POST } = toNextJsHandler(auth.handler);

apps/cli/template/with-auth/apps/web-next/src/app/dashboard/page.tsx

@@ -0,0 +1,31 @@
+"use client"
+import { authClient } from "@/lib/auth-client";
+import { trpc } from "@/utils/trpc";
+import { useQuery } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+export default function Dashboard() {
+  const router = useRouter()
+  const { data: session, isPending } = authClient.useSession();
+
+  const privateData = useQuery(trpc.privateData.queryOptions());
+
+  useEffect(() => {
+    if (!session && !isPending) {
+      router.push("/login");
+    }
+  }, [session, isPending]);
+
+  if (isPending) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      <h1>Dashboard</h1>
+      <p>Welcome {session?.user.name}</p>
+      <p>privateData: {privateData.data?.message}</p>
+    </div>
+  );
+}

apps/cli/template/with-auth/apps/web-next/src/app/login/page.tsx

@@ -0,0 +1,16 @@
+"use client"
+
+import SignInForm from "@/components/sign-in-form";
+import SignUpForm from "@/components/sign-up-form";
+import { useState } from "react";
+
+
+export default function LoginPage() {
+  const [showSignIn, setShowSignIn] = useState(false);
+
+  return showSignIn ? (
+    <SignInForm onSwitchToSignUp={() => setShowSignIn(false)} />
+  ) : (
+    <SignUpForm onSwitchToSignIn={() => setShowSignIn(true)} />
+  );
+}

apps/cli/template/with-auth/apps/web-next/src/components/header.tsx

@@ -0,0 +1,33 @@
+"use client"
+import Link from "next/link";
+import { ModeToggle } from "./mode-toggle";
+import UserMenu from "./user-menu";
+
+export default function Header() {
+  const links = [
+    { to: "/", label: "Home" },
+    { to: "/dashboard", label: "Dashboard" },
+  ];
+
+  return (
+    <div>
+      <div className="flex flex-row items-center justify-between px-2 py-1">
+        <nav className="flex gap-4 text-lg">
+          {links.map(({ to, label }) => (
+            <Link
+              key={to}
+              href={to}
+            >
+              {label}
+            </Link>
+          ))}
+        </nav>
+        <div className="flex items-center gap-2">
+          <ModeToggle />
+          <UserMenu />
+        </div>
+      </div>
+      <hr />
+    </div>
+  );
+}

apps/cli/template/with-auth/apps/web-next/src/components/sign-in-form.tsx

@@ -0,0 +1,135 @@
+import { authClient } from "@/lib/auth-client";
+import { useForm } from "@tanstack/react-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import Loader from "./loader";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+import { useRouter } from "next/navigation";
+
+export default function SignInForm({
+  onSwitchToSignUp,
+}: {
+  onSwitchToSignUp: () => void;
+}) {
+  const router = useRouter()
+  const { isPending } = authClient.useSession();
+
+  const form = useForm({
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+    onSubmit: async ({ value }) => {
+      await authClient.signIn.email(
+        {
+          email: value.email,
+          password: value.password,
+        },
+        {
+          onSuccess: () => {
+            router.push("/dashboard")
+            toast.success("Sign in successful");
+          },
+          onError: (error) => {
+            toast.error(error.error.message);
+          },
+        },
+      );
+    },
+    validators: {
+      onSubmit: z.object({
+        email: z.string().email("Invalid email address"),
+        password: z.string().min(6, "Password must be at least 6 characters"),
+      }),
+    },
+  });
+
+  if (isPending) {
+    return <Loader />;
+  }
+
+  return (
+    <div className="mx-auto w-full mt-10 max-w-md p-6">
+      <h1 className="mb-6 text-center text-3xl font-bold">Welcome Back</h1>
+
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          void form.handleSubmit();
+        }}
+        className="space-y-4"
+      >
+        <div>
+          <form.Field name="email">
+            {(field) => (
+              <div className="space-y-2">
+                <Label htmlFor={field.name}>Email</Label>
+                <Input
+                  id={field.name}
+                  name={field.name}
+                  type="email"
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+                {field.state.meta.errors.map((error) => (
+                  <p key={error?.message} className="text-red-500">
+                    {error?.message}
+                  </p>
+                ))}
+              </div>
+            )}
+          </form.Field>
+        </div>
+
+        <div>
+          <form.Field name="password">
+            {(field) => (
+              <div className="space-y-2">
+                <Label htmlFor={field.name}>Password</Label>
+                <Input
+                  id={field.name}
+                  name={field.name}
+                  type="password"
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+                {field.state.meta.errors.map((error) => (
+                  <p key={error?.message} className="text-red-500">
+                    {error?.message}
+                  </p>
+                ))}
+              </div>
+            )}
+          </form.Field>
+        </div>
+
+        <form.Subscribe>
+          {(state) => (
+            <Button
+              type="submit"
+              className="w-full"
+              disabled={!state.canSubmit || state.isSubmitting}
+            >
+              {state.isSubmitting ? "Submitting..." : "Sign In"}
+            </Button>
+          )}
+        </form.Subscribe>
+      </form>
+
+      <div className="mt-4 text-center">
+        <Button
+          variant="link"
+          onClick={onSwitchToSignUp}
+          className="text-indigo-600 hover:text-indigo-800"
+        >
+          Need an account? Sign Up
+        </Button>
+      </div>
+    </div>
+  );
+}

apps/cli/template/with-auth/apps/web-next/src/components/sign-up-form.tsx

@@ -0,0 +1,160 @@
+import { authClient } from "@/lib/auth-client";
+import { useForm } from "@tanstack/react-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import Loader from "./loader";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+import { useRouter } from "next/navigation";
+
+export default function SignUpForm({
+  onSwitchToSignIn,
+}: {
+  onSwitchToSignIn: () => void;
+}) {
+  const router = useRouter();
+  const { isPending } = authClient.useSession();
+
+  const form = useForm({
+    defaultValues: {
+      email: "",
+      password: "",
+      name: "",
+    },
+    onSubmit: async ({ value }) => {
+      await authClient.signUp.email(
+        {
+          email: value.email,
+          password: value.password,
+          name: value.name,
+        },
+        {
+          onSuccess: () => {
+            router.push("/dashboard");
+            toast.success("Sign up successful");
+          },
+          onError: (error) => {
+            toast.error(error.error.message);
+          },
+        },
+      );
+    },
+    validators: {
+      onSubmit: z.object({
+        name: z.string().min(2, "Name must be at least 2 characters"),
+        email: z.string().email("Invalid email address"),
+        password: z.string().min(6, "Password must be at least 6 characters"),
+      }),
+    },
+  });
+
+  if (isPending) {
+    return <Loader />;
+  }
+
+  return (
+    <div className="mx-auto w-full mt-10 max-w-md p-6">
+      <h1 className="mb-6 text-center text-3xl font-bold">Create Account</h1>
+
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          void form.handleSubmit();
+        }}
+        className="space-y-4"
+      >
+        <div>
+          <form.Field name="name">
+            {(field) => (
+              <div className="space-y-2">
+                <Label htmlFor={field.name}>Name</Label>
+                <Input
+                  id={field.name}
+                  name={field.name}
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+                {field.state.meta.errors.map((error) => (
+                  <p key={error?.message} className="text-red-500">
+                    {error?.message}
+                  </p>
+                ))}
+              </div>
+            )}
+          </form.Field>
+        </div>
+
+        <div>
+          <form.Field name="email">
+            {(field) => (
+              <div className="space-y-2">
+                <Label htmlFor={field.name}>Email</Label>
+                <Input
+                  id={field.name}
+                  name={field.name}
+                  type="email"
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+                {field.state.meta.errors.map((error) => (
+                  <p key={error?.message} className="text-red-500">
+                    {error?.message}
+                  </p>
+                ))}
+              </div>
+            )}
+          </form.Field>
+        </div>
+
+        <div>
+          <form.Field name="password">
+            {(field) => (
+              <div className="space-y-2">
+                <Label htmlFor={field.name}>Password</Label>
+                <Input
+                  id={field.name}
+                  name={field.name}
+                  type="password"
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+                {field.state.meta.errors.map((error) => (
+                  <p key={error?.message} className="text-red-500">
+                    {error?.message}
+                  </p>
+                ))}
+              </div>
+            )}
+          </form.Field>
+        </div>
+
+        <form.Subscribe>
+          {(state) => (
+            <Button
+              type="submit"
+              className="w-full"
+              disabled={!state.canSubmit || state.isSubmitting}
+            >
+              {state.isSubmitting ? "Submitting..." : "Sign Up"}
+            </Button>
+          )}
+        </form.Subscribe>
+      </form>
+
+      <div className="mt-4 text-center">
+        <Button
+          variant="link"
+          onClick={onSwitchToSignIn}
+          className="text-indigo-600 hover:text-indigo-800"
+        >
+          Already have an account? Sign In
+        </Button>
+      </div>
+    </div>
+  );
+}

apps/cli/template/with-auth/apps/web-next/src/components/theme-provider.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

apps/cli/template/with-auth/apps/web-next/src/components/user-menu.tsx

@@ -0,0 +1,60 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { authClient } from "@/lib/auth-client";
+import { Button } from "./ui/button";
+import { Skeleton } from "./ui/skeleton";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+
+export default function UserMenu() {
+  const router = useRouter();
+  const { data: session, isPending } = authClient.useSession();
+
+  if (isPending) {
+    return <Skeleton className="h-9 w-24" />;
+  }
+
+  if (!session) {
+    return (
+      <Button variant="outline" asChild>
+        <Link href="/login">Sign In</Link>
+      </Button>
+    );
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">{session.user.name}</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="bg-card">
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>{session.user.email}</DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <Button
+            variant="destructive"
+            className="w-full"
+            onClick={() => {
+              authClient.signOut({
+                fetchOptions: {
+                  onSuccess: () => {
+                    router.push("/");
+                  },
+                },
+              });
+            }}
+          >
+            Sign Out
+          </Button>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

apps/cli/template/with-auth/apps/web-next/src/lib/auth-client.ts

@@ -0,0 +1,5 @@
+import { createAuthClient } from "better-auth/react";
+
+export const authClient = createAuthClient({
+  baseURL: process.env.NEXT_PUBLIC_SERVER_URL,
+});

apps/cli/template/with-auth/apps/web-next/src/utils/trpc.ts

@@ -0,0 +1,39 @@
+import { QueryCache, QueryClient } from '@tanstack/react-query';
+import { createTRPCClient, httpBatchLink } from '@trpc/client';
+import { createTRPCOptionsProxy } from '@trpc/tanstack-react-query';
+import type { AppRouter } from '../../../server/src/routers';
+import { toast } from 'sonner';
+
+export const queryClient = new QueryClient({
+  queryCache: new QueryCache({
+    onError: (error) => {
+      toast.error(error.message, {
+        action: {
+          label: "retry",
+          onClick: () => {
+            queryClient.invalidateQueries();
+          },
+        },
+      });
+    },
+  }),
+});
+
+const trpcClient = createTRPCClient<AppRouter>({
+  links: [
+    httpBatchLink({
+      url: `${process.env.NEXT_PUBLIC_SERVER_URL}/api/trpc`,
+      fetch(url, options) {
+        return fetch(url, {
+          ...options,
+          credentials: "include",
+        });
+      },
+    }),
+  ],
+})
+
+export const trpc = createTRPCOptionsProxy<AppRouter>({
+  client: trpcClient,
+  queryClient,
+});

apps/cli/template/with-next/apps/server/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/cli/template/with-next/apps/server/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

apps/cli/template/with-next/apps/server/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "server",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@trpc/client": "^11.1.0",
+    "@trpc/server": "^11.1.0",
+    "next": "15.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "typescript": "^5"
+  }
+}

apps/cli/template/with-next/apps/server/src/app/api/trpc/[trpc]/route.ts

@@ -0,0 +1,14 @@
+import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
+import { appRouter } from '@/routers';
+import { createContext } from '@/lib/context';
+import { NextRequest } from 'next/server';
+
+function handler(req: NextRequest) {
+  return fetchRequestHandler({
+    endpoint: '/api/trpc',
+    req,
+    router: appRouter,
+    createContext: () => createContext(req)
+  });
+}
+export { handler as GET, handler as POST };

apps/cli/template/with-next/apps/server/src/app/route.ts

@@ -0,0 +1,5 @@
+import { NextResponse } from "next/server";
+
+export async function GET() {
+  return NextResponse.json({ message: "OK" });
+}

apps/cli/template/with-next/apps/server/src/lib/context.ts

@@ -0,0 +1,9 @@
+import type { NextRequest } from "next/server";
+
+export async function createContext(req: NextRequest) {
+  return {
+    session: null,
+  };
+}
+
+export type Context = Awaited<ReturnType<typeof createContext>>;

apps/cli/template/with-next/apps/server/src/middleware.ts

@@ -0,0 +1,19 @@
+import { NextResponse } from "next/server";
+
+export function middleware() {
+  const res = NextResponse.next()
+
+  res.headers.append('Access-Control-Allow-Credentials', "true")
+  res.headers.append('Access-Control-Allow-Origin', process.env.CORS_ORIGIN || "")
+  res.headers.append('Access-Control-Allow-Methods', 'GET,POST,OPTIONS')
+  res.headers.append(
+    'Access-Control-Allow-Headers',
+    'Content-Type, Authorization'
+  )
+
+  return res
+}
+
+export const config = {
+  matcher: '/api/:path*',
+}

apps/cli/template/with-next/apps/server/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "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": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

apps/web/src/app/(home)/_components/StackArchitech.tsx

@@ -132,7 +132,8 @@ const StackArchitect = ({
 		const hasWebFrontend =
 			stack.frontend.includes("tanstack-router") ||
 			stack.frontend.includes("react-router") ||
-			stack.frontend.includes("tanstack-start");
+			stack.frontend.includes("tanstack-start") ||
+			stack.frontend.includes("next");
 
 		notes.frontend = [];
 
@@ -281,6 +282,7 @@ const StackArchitect = ({
 						"tanstack-router",
 						"react-router",
 						"tanstack-start",
+						"next",
 					];
 
 					if (techId === "none") {

apps/web/src/lib/constant.ts

@@ -24,6 +24,14 @@ export const TECH_OPTIONS = {
 			color: "from-purple-400 to-purple-600",
 			default: false,
 		},
+		{
+			id: "next",
+			name: "Next.js",
+			description: "React framework with hybrid rendering",
+			icon: "▲",
+			color: "from-gray-700 to-black",
+			default: false,
+		},
 		{
 			id: "native",
 			name: "React Native",
@@ -67,6 +75,13 @@ export const TECH_OPTIONS = {
 			color: "from-blue-500 to-blue-700",
 			default: true,
 		},
+		{
+			id: "next",
+			name: "Next.js",
+			description: "App Router and API Routes",
+			icon: "▲",
+			color: "from-gray-700 to-black",
+		},
 		{
 			id: "elysia",
 			name: "Elysia",