From 01e29bc4926f133634bf963fde4f595b3a094380 Mon Sep 17 00:00:00 2001
From: lwj <674416404@qq.com>
Date: Wed, 20 May 2026 21:07:02 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20Nuxt=20?=
 =?UTF-8?q?=E5=92=8C=20Next.js=20=E6=A8=A1=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                |  12 ++-
 package.json                             |   7 +-
 src/index.ts                             |  70 ++++++++++++--
 src/templates.ts                         |  22 ++++-
 templates/react-next/.stackblitzrc       |   4 +
 templates/react-next/_gitignore          |   4 +
 templates/react-next/app/globals.css     | 117 +++++++++++++++++++++++
 templates/react-next/app/layout.tsx      |  11 +++
 templates/react-next/app/page.tsx        |  61 ++++++++++++
 templates/react-next/next-env.d.ts       |   4 +
 templates/react-next/next.config.ts      |   7 ++
 templates/react-next/package.json        |  25 +++++
 templates/react-next/pnpm-workspace.yaml |   4 +
 templates/react-next/tsconfig.json       |  34 +++++++
 templates/vue-nuxt/.stackblitzrc         |   4 +
 templates/vue-nuxt/_gitignore            |   5 +
 templates/vue-nuxt/app/app.vue           |   3 +
 templates/vue-nuxt/app/assets/style.css  | 107 +++++++++++++++++++++
 templates/vue-nuxt/app/pages/index.vue   |  54 +++++++++++
 templates/vue-nuxt/nuxt.config.ts        |  11 +++
 templates/vue-nuxt/package.json          |  26 +++++
 templates/vue-nuxt/pnpm-workspace.yaml   |   5 +
 templates/vue-nuxt/tsconfig.json         |  17 ++++
 23 files changed, 598 insertions(+), 16 deletions(-)
 create mode 100644 templates/react-next/.stackblitzrc
 create mode 100644 templates/react-next/_gitignore
 create mode 100644 templates/react-next/app/globals.css
 create mode 100644 templates/react-next/app/layout.tsx
 create mode 100644 templates/react-next/app/page.tsx
 create mode 100644 templates/react-next/next-env.d.ts
 create mode 100644 templates/react-next/next.config.ts
 create mode 100644 templates/react-next/package.json
 create mode 100644 templates/react-next/pnpm-workspace.yaml
 create mode 100644 templates/react-next/tsconfig.json
 create mode 100644 templates/vue-nuxt/.stackblitzrc
 create mode 100644 templates/vue-nuxt/_gitignore
 create mode 100644 templates/vue-nuxt/app/app.vue
 create mode 100644 templates/vue-nuxt/app/assets/style.css
 create mode 100644 templates/vue-nuxt/app/pages/index.vue
 create mode 100644 templates/vue-nuxt/nuxt.config.ts
 create mode 100644 templates/vue-nuxt/package.json
 create mode 100644 templates/vue-nuxt/pnpm-workspace.yaml
 create mode 100644 templates/vue-nuxt/tsconfig.json

diff --git a/README.md b/README.md
index e070bde..60796d0 100644
--- a/README.md
+++ b/README.md
@@ -4,13 +4,14 @@
 
 ## Templates
 
-当前已支持 36 个 TypeScript 模板：
+当前已支持 38 个 TypeScript 模板：
 
 ### Vue SFC
 
 - `vue-vite`
 - `vue-rsbuild`
 - `vue-vike`
+- `vue-nuxt`
 - `vue-vite-on-demand`
 - `vue-vike-on-demand`
 - `vue-rsbuild-on-demand`
@@ -56,6 +57,7 @@
 - `react-vite`
 - `react-rsbuild`
 - `react-vike`
+- `react-next`
 - `mobile-react-vite`
 - `mobile-react-rsbuild`
 - `mobile-react-vike`
@@ -76,10 +78,12 @@ pnpm create tdesign my-app
 ```bash
 pnpm create tdesign my-app --template vue-vite
 pnpm create tdesign my-app --template vue-vike
+pnpm create tdesign my-app --template vue-nuxt
 pnpm create tdesign my-app --template vue-tsx-rsbuild
 pnpm create tdesign my-app --template vue-vite-on-demand
 pnpm create tdesign my-app --template react-chat-rsbuild
 pnpm create tdesign my-app --template react-vike
+pnpm create tdesign my-app --template react-next
 ```
 
 按 UI 和打包工具组合指定：
@@ -88,6 +92,8 @@ pnpm create tdesign my-app --template react-vike
 pnpm create tdesign my-app --ui vue --bundler vite
 pnpm create tdesign my-app --ui react --bundler rsbuild
 pnpm create tdesign my-app --ui react --bundler vike
+pnpm create tdesign my-app --ui vue --bundler nuxt
+pnpm create tdesign my-app --ui react --bundler next
 pnpm create tdesign my-app --ui vue --bundler vite --import-mode on-demand
 ```
 
@@ -115,8 +121,10 @@ pnpm create tdesign my-app --template react-chat-rsbuild --pm bun
 ## Notes
 
 - `chat` 模板默认提供一个可运行的聊天前端壳子，真实模型接口需要你在模板页面文件里补充 `chatServiceConfig`。
-- Vue / Mobile Vue / Vue Chat 的 SFC 模板支持 `Full` 和 `On-demand` 两种引入模式。
+- Vue / Mobile Vue / Vue Chat 的 SFC 模板支持 `Full` 和 `On-demand` 两种引入模式，Nuxt 模板通过 `@tdesign-vue-next/nuxt` 默认使用按需引入。
 - TSX 模板不支持 `--import-mode on-demand`，`unplugin-vue-components` 仅对 SFC `<template>` 生效。
+- Nuxt 4 模板要求 Node.js 22.12+。
+- Next.js 模板使用 App Router 和客户端页面承载 TDesign UI。
 - `mobile-vue` 模板在 pnpm v11+ 环境下首次安装会自动放行 `vue-demi` 的构建脚本。
 
 ## Development
diff --git a/package.json b/package.json
index 27dc915..26ef207 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "create-tdesign",
   "version": "0.1.0",
   "packageManager": "pnpm@11.1.2",
-  "description": "Scaffold TDesign projects with Vite, Rsbuild, or Vike.",
+  "description": "Scaffold TDesign projects with Vite, Rsbuild, Vike, Nuxt, or Next.",
   "type": "module",
   "license": "MIT",
   "bin": {
@@ -38,9 +38,10 @@
     "scaffold",
     "vite",
     "rsbuild",
-    "vike"
+    "vike",
+    "nuxt",
+    "next"
   ],
-  
   "devDependencies": {
     "@clack/prompts": "^1.4.0",
     "@types/node": "^25.8.0",
diff --git a/src/index.ts b/src/index.ts
index dc43f5e..9fd5a7a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -71,7 +71,7 @@ Scaffold a TDesign project with TypeScript.
 Options:
   -t, --template NAME       use a specific template
       --ui NAME             choose a UI framework
-      --bundler NAME        choose a bundler (vite, rsbuild, vike)
+      --bundler NAME        choose a bundler or app framework (vite, rsbuild, vike, nuxt, next)
       --import-mode NAME    choose a Vue import mode (full, on-demand)
       --package-manager     choose a package manager (npm, pnpm, bun, yarn)
       --pm NAME             alias of --package-manager
@@ -241,8 +241,10 @@ async function resolveTemplate(interactive: boolean) {
 
     const ui = normalizeUi(argv.ui)
     const bundler = normalizeBundler(argv.bundler)
-    const vueTemplateStyle = isVueRelatedUi(ui) ? 'sfc' : undefined
-    const importMode = isVueImportModeSupportedUi(ui) && argv['import-mode']
+    const vueTemplateStyle = isVueRelatedUi(ui) && hasVueTemplateStyle(ui, bundler, 'sfc')
+      ? 'sfc'
+      : undefined
+    const importMode = isVueImportModeSupported(ui, bundler) && argv['import-mode']
       ? normalizeImportMode(argv['import-mode'])
       : undefined
 
@@ -273,9 +275,10 @@ async function resolveTemplate(interactive: boolean) {
 
   const normalizedUi = ui as UiFramework
 
+  const availableBundlers = getAvailableBundlers(normalizedUi)
   const bundler = await prompts.select({
-    message: 'Select a bundler:',
-    options: BUNDLER_OPTIONS.map((option) => ({
+    message: 'Select a bundler or app framework:',
+    options: availableBundlers.map((option) => ({
       label: option.label,
       value: option.value,
     })),
@@ -287,28 +290,36 @@ async function resolveTemplate(interactive: boolean) {
 
   const normalizedBundler = bundler as Bundler
   const vueTemplateStyle = isVueRelatedUi(normalizedUi)
-    ? await resolveVueTemplateStyle()
+    ? await resolveVueTemplateStyle(normalizedUi, normalizedBundler)
     : undefined
 
   if (isVueRelatedUi(normalizedUi) && !vueTemplateStyle) {
     return undefined
   }
 
-  const importMode = isVueImportModeSupportedUi(normalizedUi) && vueTemplateStyle === 'sfc'
+  const importMode = isVueImportModeSupported(normalizedUi, normalizedBundler) && vueTemplateStyle === 'sfc'
     ? await resolveVueImportMode()
     : undefined
 
-  if (isVueImportModeSupportedUi(normalizedUi) && vueTemplateStyle === 'sfc' && !importMode) {
+  if (isVueImportModeSupported(normalizedUi, normalizedBundler) && vueTemplateStyle === 'sfc' && !importMode) {
     return undefined
   }
 
   return findTemplateByParts(normalizedUi, normalizedBundler, vueTemplateStyle, importMode)
 }
 
-async function resolveVueTemplateStyle() {
+async function resolveVueTemplateStyle(ui: UiFramework, bundler: Bundler) {
+  const availableStyles = VUE_TEMPLATE_STYLE_OPTIONS.filter((option) =>
+    hasVueTemplateStyle(ui, bundler, option.value),
+  )
+
+  if (availableStyles.length === 1) {
+    return availableStyles[0]?.value
+  }
+
   const vueTemplateStyle = await prompts.select({
     message: 'Select a Vue component style:',
-    options: VUE_TEMPLATE_STYLE_OPTIONS.map((option) => ({
+    options: availableStyles.map((option) => ({
       label: option.label,
       value: option.value,
     })),
@@ -490,6 +501,45 @@ function isVueImportModeSupportedUi(value: UiFramework) {
   return value === 'vue' || value === 'mobile-vue' || value === 'vue-chat'
 }
 
+function isVueImportModeSupported(ui: UiFramework, bundler: Bundler) {
+  if (!isVueImportModeSupportedUi(ui)) {
+    return false
+  }
+
+  return getAvailableImportModes(ui, bundler).length > 1
+}
+
+function getAvailableImportModes(ui: UiFramework, bundler: Bundler) {
+  return TEMPLATES
+    .filter(
+      (template) =>
+        template.ui === ui &&
+        template.bundler === bundler &&
+        template.vueTemplateStyle === 'sfc' &&
+        template.importMode,
+    )
+    .map((template) => template.importMode)
+}
+
+function getAvailableBundlers(ui: UiFramework) {
+  return BUNDLER_OPTIONS.filter((option) =>
+    TEMPLATES.some((template) => template.ui === ui && template.bundler === option.value),
+  )
+}
+
+function hasVueTemplateStyle(
+  ui: UiFramework,
+  bundler: Bundler,
+  vueTemplateStyle: VueTemplateStyle,
+) {
+  return TEMPLATES.some(
+    (template) =>
+      template.ui === ui &&
+      template.bundler === bundler &&
+      template.vueTemplateStyle === vueTemplateStyle,
+  )
+}
+
 function normalizeBundler(value: string): Bundler {
   const match = BUNDLER_OPTIONS.find((option) => option.value === value)
   if (match) {
diff --git a/src/templates.ts b/src/templates.ts
index 7b6ca26..055cfa6 100644
--- a/src/templates.ts
+++ b/src/templates.ts
@@ -5,7 +5,7 @@ export type UiFramework =
   | 'mobile-react'
   | 'vue-chat'
   | 'react-chat'
-export type Bundler = 'vite' | 'rsbuild' | 'vike'
+export type Bundler = 'vite' | 'rsbuild' | 'vike' | 'nuxt' | 'next'
 export type VueTemplateStyle = 'sfc' | 'tsx'
 export type TemplateImportMode = 'full' | 'on-demand'
 export type TemplateId =
@@ -15,7 +15,9 @@ export type TemplateId =
   | 'vue-vike'
   | 'vue-vike-on-demand'
   | 'vue-tsx-vike'
+  | 'vue-nuxt'
   | 'react-vite'
+  | 'react-next'
   | 'mobile-react-vite'
   | 'mobile-vue-vike'
   | 'mobile-vue-vike-on-demand'
@@ -130,6 +132,13 @@ export const TEMPLATES: TemplateMeta[] = [
     display: 'React + Vike',
     description: 'React + TypeScript + Vike + tdesign-react',
   },
+  {
+    id: 'react-next',
+    ui: 'react',
+    bundler: 'next',
+    display: 'React + Next.js',
+    description: 'React + TypeScript + Next.js + tdesign-react',
+  },
   {
     id: 'vue-vike',
     importMode: 'full',
@@ -156,6 +165,15 @@ export const TEMPLATES: TemplateMeta[] = [
     display: 'Vue + TSX + Vike',
     description: 'Vue 3 + TSX + TypeScript + Vike + tdesign-vue-next',
   },
+  {
+    id: 'vue-nuxt',
+    importMode: 'on-demand',
+    ui: 'vue',
+    bundler: 'nuxt',
+    vueTemplateStyle: 'sfc',
+    display: 'Vue + Nuxt',
+    description: 'Vue 3 + TypeScript + Nuxt 4 + tdesign-vue-next on-demand',
+  },
   {
     id: 'mobile-vue-vite',
     importMode: 'full',
@@ -369,6 +387,8 @@ export const BUNDLER_OPTIONS: Array<{ value: Bundler; label: string }> = [
   { value: 'vite', label: 'Vite' },
   { value: 'rsbuild', label: 'Rsbuild' },
   { value: 'vike', label: 'Vike' },
+  { value: 'nuxt', label: 'Nuxt' },
+  { value: 'next', label: 'Next.js' },
 ]
 
 export function findTemplateById(templateId: string): TemplateMeta | undefined {
diff --git a/templates/react-next/.stackblitzrc b/templates/react-next/.stackblitzrc
new file mode 100644
index 0000000..86793c0
--- /dev/null
+++ b/templates/react-next/.stackblitzrc
@@ -0,0 +1,4 @@
+{
+  "installDependencies": false,
+  "startCommand": "pnpm install && pnpm dev"
+}
diff --git a/templates/react-next/_gitignore b/templates/react-next/_gitignore
new file mode 100644
index 0000000..3d22da5
--- /dev/null
+++ b/templates/react-next/_gitignore
@@ -0,0 +1,4 @@
+node_modules/
+.next/
+dist/
+.DS_Store
diff --git a/templates/react-next/app/globals.css b/templates/react-next/app/globals.css
new file mode 100644
index 0000000..d959197
--- /dev/null
+++ b/templates/react-next/app/globals.css
@@ -0,0 +1,117 @@
+:root {
+  color: #0f172a;
+  background: #f3f6fb;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+body {
+  color: #1f2937;
+}
+
+.page-shell {
+  min-height: 100vh;
+  padding: 24px;
+  background:
+    radial-gradient(circle at top left, rgba(0, 82, 217, 0.12), transparent 24%),
+    linear-gradient(180deg, #f7f9fc 0%, #eef3f9 100%);
+}
+
+.hero-grid {
+  display: grid;
+  gap: 20px;
+  max-width: 1080px;
+  margin: 0 auto;
+}
+
+.hero-card,
+.panel-card {
+  border-radius: 24px;
+  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
+}
+
+.eyebrow,
+.section-heading {
+  margin: 0;
+  color: #315efb;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.hero-copy {
+  display: grid;
+  gap: 12px;
+}
+
+.hero-title {
+  margin: 0;
+  font-size: clamp(32px, 5vw, 52px);
+  line-height: 1.05;
+}
+
+.hero-intro {
+  margin: 0;
+  max-width: 56ch;
+  color: #52606d;
+  font-size: 16px;
+  line-height: 1.7;
+}
+
+.action-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.section-block {
+  display: grid;
+  gap: 20px;
+}
+
+.section-list {
+  display: grid;
+  gap: 16px;
+}
+
+.section-row {
+  display: grid;
+  gap: 6px;
+}
+
+.section-row-title {
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.section-row-description {
+  margin: 0;
+  color: #52606d;
+  font-size: 15px;
+  line-height: 1.65;
+}
+
+@media (min-width: 860px) {
+  .hero-grid {
+    grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.8fr);
+    align-items: start;
+  }
+
+  .hero-card {
+    display: flex;
+    min-height: 420px;
+    align-items: center;
+  }
+}
diff --git a/templates/react-next/app/layout.tsx b/templates/react-next/app/layout.tsx
new file mode 100644
index 0000000..be2f5d9
--- /dev/null
+++ b/templates/react-next/app/layout.tsx
@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react'
+import 'tdesign-react/es/style/index.css'
+import './globals.css'
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/templates/react-next/app/page.tsx b/templates/react-next/app/page.tsx
new file mode 100644
index 0000000..304b4d3
--- /dev/null
+++ b/templates/react-next/app/page.tsx
@@ -0,0 +1,61 @@
+'use client'
+
+import { AppIcon } from 'tdesign-icons-react'
+import { Button, Card, Space } from 'tdesign-react'
+
+const sections = [
+  {
+    title: 'Starter stack',
+    description: 'Built with React, TypeScript, Next.js, and TDesign desktop components.',
+  },
+  {
+    title: 'Routing and rendering',
+    description: 'Use the App Router with server layouts and client UI where needed.',
+  },
+  {
+    title: 'Next step',
+    description: 'Open app/page.tsx and start shaping __PROJECTNAME__.',
+  },
+]
+
+export default function Page() {
+  return (
+    <main className="page-shell">
+      <section className="hero-grid">
+        <Card className="hero-card" bordered={false}>
+          <Space direction="vertical" size={20}>
+            <p className="eyebrow">
+              <AppIcon style={{ marginRight: '6px', verticalAlign: 'middle' }} />
+              __TEMPLATENAME__
+            </p>
+            <div className="hero-copy">
+              <h1 className="hero-title">Create TDesign</h1>
+              <p className="hero-intro">
+                Your __PROJECTNAME__ project is ready. Start building with React,
+                TypeScript, Next.js, and TDesign.
+              </p>
+            </div>
+            <div className="action-row">
+              <Button theme="primary">Run pnpm dev</Button>
+              <Button variant="outline">Open app/page.tsx</Button>
+            </div>
+          </Space>
+        </Card>
+
+        <Card className="panel-card">
+          <div className="section-block">
+            <p className="section-heading">Getting started</p>
+            <div className="section-list">
+              {sections.map((item) => (
+                <div key={item.title} className="section-row">
+                  <span className="section-row-title">{item.title}</span>
+                  <p className="section-row-description">{item.description}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </Card>
+      </section>
+    </main>
+  )
+}
diff --git a/templates/react-next/next-env.d.ts b/templates/react-next/next-env.d.ts
new file mode 100644
index 0000000..7db43ed
--- /dev/null
+++ b/templates/react-next/next-env.d.ts
@@ -0,0 +1,4 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// This file is automatically generated by Next.js.
diff --git a/templates/react-next/next.config.ts b/templates/react-next/next.config.ts
new file mode 100644
index 0000000..ba01a53
--- /dev/null
+++ b/templates/react-next/next.config.ts
@@ -0,0 +1,7 @@
+import type { NextConfig } from 'next'
+
+const nextConfig: NextConfig = {
+  typedRoutes: true,
+}
+
+export default nextConfig
diff --git a/templates/react-next/package.json b/templates/react-next/package.json
new file mode 100644
index 0000000..72d177e
--- /dev/null
+++ b/templates/react-next/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "__PACKAGENAME__",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "tsc --noEmit && next build",
+    "preview": "next build && next start",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "next": "^16.2.6",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "tdesign-icons-react": "^0.6.4",
+    "tdesign-react": "^1.16.9"
+  },
+  "devDependencies": {
+    "@types/node": "^25.8.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "typescript": "^6.0.3"
+  }
+}
diff --git a/templates/react-next/pnpm-workspace.yaml b/templates/react-next/pnpm-workspace.yaml
new file mode 100644
index 0000000..9dbe244
--- /dev/null
+++ b/templates/react-next/pnpm-workspace.yaml
@@ -0,0 +1,4 @@
+allowBuilds:
+  sharp: true
+packages:
+  - '.'
diff --git a/templates/react-next/tsconfig.json b/templates/react-next/tsconfig.json
new file mode 100644
index 0000000..a685e89
--- /dev/null
+++ b/templates/react-next/tsconfig.json
@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "app/**/*.ts",
+    "app/**/*.tsx",
+    "next.config.ts",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}
diff --git a/templates/vue-nuxt/.stackblitzrc b/templates/vue-nuxt/.stackblitzrc
new file mode 100644
index 0000000..86793c0
--- /dev/null
+++ b/templates/vue-nuxt/.stackblitzrc
@@ -0,0 +1,4 @@
+{
+  "installDependencies": false,
+  "startCommand": "pnpm install && pnpm dev"
+}
diff --git a/templates/vue-nuxt/_gitignore b/templates/vue-nuxt/_gitignore
new file mode 100644
index 0000000..f543b7c
--- /dev/null
+++ b/templates/vue-nuxt/_gitignore
@@ -0,0 +1,5 @@
+node_modules/
+.nuxt/
+.output/
+dist/
+.DS_Store
diff --git a/templates/vue-nuxt/app/app.vue b/templates/vue-nuxt/app/app.vue
new file mode 100644
index 0000000..8f62b8b
--- /dev/null
+++ b/templates/vue-nuxt/app/app.vue
@@ -0,0 +1,3 @@
+<template>
+  <NuxtPage />
+</template>
diff --git a/templates/vue-nuxt/app/assets/style.css b/templates/vue-nuxt/app/assets/style.css
new file mode 100644
index 0000000..e9d452a
--- /dev/null
+++ b/templates/vue-nuxt/app/assets/style.css
@@ -0,0 +1,107 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  color: #1f2937;
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+.page-shell {
+  min-height: 100vh;
+  padding: 24px;
+  background:
+    radial-gradient(circle at top left, rgba(0, 82, 217, 0.12), transparent 24%),
+    linear-gradient(180deg, #f7f9fc 0%, #eef3f9 100%);
+}
+
+.hero-grid {
+  display: grid;
+  gap: 20px;
+  max-width: 1080px;
+  margin: 0 auto;
+}
+
+.hero-card,
+.panel-card {
+  border-radius: 24px;
+  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
+}
+
+.eyebrow,
+.section-heading {
+  margin: 0;
+  color: #315efb;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.hero-copy {
+  display: grid;
+  gap: 12px;
+}
+
+.hero-title {
+  margin: 0;
+  font-size: clamp(32px, 5vw, 52px);
+  line-height: 1.05;
+}
+
+.hero-intro {
+  margin: 0;
+  max-width: 56ch;
+  color: #52606d;
+  font-size: 16px;
+  line-height: 1.7;
+}
+
+.action-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.section-block {
+  display: grid;
+  gap: 20px;
+}
+
+.section-list {
+  display: grid;
+  gap: 16px;
+}
+
+.section-row {
+  display: grid;
+  gap: 6px;
+}
+
+.section-row-title {
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.section-row-description {
+  margin: 0;
+  color: #52606d;
+  font-size: 15px;
+  line-height: 1.65;
+}
+
+@media (min-width: 860px) {
+  .hero-grid {
+    grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.8fr);
+    align-items: start;
+  }
+
+  .hero-card {
+    display: flex;
+    min-height: 420px;
+    align-items: center;
+  }
+}
diff --git a/templates/vue-nuxt/app/pages/index.vue b/templates/vue-nuxt/app/pages/index.vue
new file mode 100644
index 0000000..34d63d0
--- /dev/null
+++ b/templates/vue-nuxt/app/pages/index.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+const sections = [
+  {
+    title: 'Starter stack',
+    description: 'Built with Vue 3, TypeScript, Nuxt 4, and TDesign desktop components.',
+  },
+  {
+    title: 'Routing and rendering',
+    description: 'Use Nuxt file-system routing with server rendering enabled by default.',
+  },
+  {
+    title: 'Next step',
+    description: 'Open app/pages/index.vue and start shaping __PROJECTNAME__.',
+  },
+]
+</script>
+
+<template>
+  <main class="page-shell">
+    <section class="hero-grid">
+      <t-card class="hero-card" :bordered="false">
+        <t-space direction="vertical" size="20px">
+          <p class="eyebrow">
+            <app-icon style="margin-right: 6px; vertical-align: middle" />
+            __TEMPLATENAME__
+          </p>
+          <div class="hero-copy">
+            <h1 class="hero-title">Create TDesign</h1>
+            <p class="hero-intro">
+              Your __PROJECTNAME__ project is ready. Start building with Vue 3,
+              TypeScript, Nuxt 4, and TDesign.
+            </p>
+          </div>
+          <div class="action-row">
+            <t-button theme="primary">Run pnpm dev</t-button>
+            <t-button variant="outline">Open app/pages/index.vue</t-button>
+          </div>
+        </t-space>
+      </t-card>
+
+      <t-card class="panel-card">
+        <div class="section-block">
+          <p class="section-heading">Getting started</p>
+          <div class="section-list">
+            <div v-for="item in sections" :key="item.title" class="section-row">
+              <span class="section-row-title">{{ item.title }}</span>
+              <p class="section-row-description">{{ item.description }}</p>
+            </div>
+          </div>
+        </div>
+      </t-card>
+    </section>
+  </main>
+</template>
diff --git a/templates/vue-nuxt/nuxt.config.ts b/templates/vue-nuxt/nuxt.config.ts
new file mode 100644
index 0000000..ef38907
--- /dev/null
+++ b/templates/vue-nuxt/nuxt.config.ts
@@ -0,0 +1,11 @@
+export default defineNuxtConfig({
+  compatibilityDate: '2026-05-19',
+  modules: ['@tdesign-vue-next/nuxt'],
+  tdesign: {
+    resolveIcons: true,
+  },
+  css: ['~/assets/style.css'],
+  typescript: {
+    strict: true,
+  },
+})
diff --git a/templates/vue-nuxt/package.json b/templates/vue-nuxt/package.json
new file mode 100644
index 0000000..a6cecd0
--- /dev/null
+++ b/templates/vue-nuxt/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "__PACKAGENAME__",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "nuxt dev",
+    "build": "nuxt typecheck && nuxt build",
+    "preview": "nuxt build && nuxt preview",
+    "typecheck": "nuxt typecheck"
+  },
+  "dependencies": {
+    "nuxt": "^4.4.6",
+    "tdesign-icons-vue-next": "^0.4.4",
+    "tdesign-vue-next": "^1.20.0",
+    "vue": "^3.5.34"
+  },
+  "devDependencies": {
+    "@tdesign-vue-next/nuxt": "^0.2.1",
+    "typescript": "^6.0.3",
+    "vue-tsc": "^3.2.9"
+  },
+  "engines": {
+    "node": "^22.12.0 || ^24.11.0 || >=26.0.0"
+  }
+}
diff --git a/templates/vue-nuxt/pnpm-workspace.yaml b/templates/vue-nuxt/pnpm-workspace.yaml
new file mode 100644
index 0000000..ccf8668
--- /dev/null
+++ b/templates/vue-nuxt/pnpm-workspace.yaml
@@ -0,0 +1,5 @@
+allowBuilds:
+  '@parcel/watcher': true
+  esbuild: true
+packages:
+  - '.'
diff --git a/templates/vue-nuxt/tsconfig.json b/templates/vue-nuxt/tsconfig.json
new file mode 100644
index 0000000..6ae5970
--- /dev/null
+++ b/templates/vue-nuxt/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
+}

From d4a3fbe10c2fb04386149eb026d11704e07b5515 Mon Sep 17 00:00:00 2001
From: lwj <674416404@qq.com>
Date: Wed, 20 May 2026 21:26:54 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix(next):=20=E4=BF=AE=E5=A4=8D=20StackBlit?=
 =?UTF-8?q?z=20=E5=90=AF=E5=8A=A8=E5=8F=8A=E6=9C=8D=E5=8A=A1=E7=AB=AF?=
 =?UTF-8?q?=E6=B8=B2=E6=9F=93=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                |  1 +
 package.json                             |  2 +-
 templates/react-next/.stackblitzrc       |  2 +-
 templates/react-next/app/client-page.tsx | 61 ++++++++++++++++++++++++
 templates/react-next/app/page.tsx        | 60 +----------------------
 5 files changed, 66 insertions(+), 60 deletions(-)
 create mode 100644 templates/react-next/app/client-page.tsx

diff --git a/README.md b/README.md
index 60796d0..e17134d 100644
--- a/README.md
+++ b/README.md
@@ -125,6 +125,7 @@ pnpm create tdesign my-app --template react-chat-rsbuild --pm bun
 - TSX 模板不支持 `--import-mode on-demand`，`unplugin-vue-components` 仅对 SFC `<template>` 生效。
 - Nuxt 4 模板要求 Node.js 22.12+。
 - Next.js 模板使用 App Router 和客户端页面承载 TDesign UI。
+- Next.js 模板在 StackBlitz 上使用 Webpack 启动。
 - `mobile-vue` 模板在 pnpm v11+ 环境下首次安装会自动放行 `vue-demi` 的构建脚本。
 
 ## Development
diff --git a/package.json b/package.json
index 26ef207..2355052 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "create-tdesign",
   "version": "0.1.0",
   "packageManager": "pnpm@11.1.2",
-  "description": "Scaffold TDesign projects with Vite, Rsbuild, Vike, Nuxt, or Next.",
+  "description": "Scaffold TDesign projects with Vite, Rsbuild, Vike, Nuxt, or Next.js.",
   "type": "module",
   "license": "MIT",
   "bin": {
diff --git a/templates/react-next/.stackblitzrc b/templates/react-next/.stackblitzrc
index 86793c0..15499bd 100644
--- a/templates/react-next/.stackblitzrc
+++ b/templates/react-next/.stackblitzrc
@@ -1,4 +1,4 @@
 {
   "installDependencies": false,
-  "startCommand": "pnpm install && pnpm dev"
+  "startCommand": "pnpm install && pnpm exec next dev --webpack"
 }
diff --git a/templates/react-next/app/client-page.tsx b/templates/react-next/app/client-page.tsx
new file mode 100644
index 0000000..899f2ca
--- /dev/null
+++ b/templates/react-next/app/client-page.tsx
@@ -0,0 +1,61 @@
+'use client'
+
+import { AppIcon } from 'tdesign-icons-react'
+import { Button, Card, Space } from 'tdesign-react'
+
+const sections = [
+  {
+    title: 'Starter stack',
+    description: 'Built with React, TypeScript, Next.js, and TDesign desktop components.',
+  },
+  {
+    title: 'Routing and rendering',
+    description: 'Use the App Router with server layouts and client UI where needed.',
+  },
+  {
+    title: 'Next step',
+    description: 'Open app/page.tsx and start shaping __PROJECTNAME__.',
+  },
+]
+
+export default function ClientPage() {
+  return (
+    <main className="page-shell">
+      <section className="hero-grid">
+        <Card className="hero-card" bordered={false}>
+          <Space direction="vertical" size={20}>
+            <p className="eyebrow">
+              <AppIcon style={{ marginRight: '6px', verticalAlign: 'middle' }} />
+              __TEMPLATENAME__
+            </p>
+            <div className="hero-copy">
+              <h1 className="hero-title">Create TDesign</h1>
+              <p className="hero-intro">
+                Your __PROJECTNAME__ project is ready. Start building with React,
+                TypeScript, Next.js, and TDesign.
+              </p>
+            </div>
+            <div className="action-row">
+              <Button theme="primary">Run pnpm dev</Button>
+              <Button variant="outline">Open app/page.tsx</Button>
+            </div>
+          </Space>
+        </Card>
+
+        <Card className="panel-card">
+          <div className="section-block">
+            <p className="section-heading">Getting started</p>
+            <div className="section-list">
+              {sections.map((item) => (
+                <div key={item.title} className="section-row">
+                  <span className="section-row-title">{item.title}</span>
+                  <p className="section-row-description">{item.description}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </Card>
+      </section>
+    </main>
+  )
+}
diff --git a/templates/react-next/app/page.tsx b/templates/react-next/app/page.tsx
index 304b4d3..f4cee3b 100644
--- a/templates/react-next/app/page.tsx
+++ b/templates/react-next/app/page.tsx
@@ -1,61 +1,5 @@
-'use client'
-
-import { AppIcon } from 'tdesign-icons-react'
-import { Button, Card, Space } from 'tdesign-react'
-
-const sections = [
-  {
-    title: 'Starter stack',
-    description: 'Built with React, TypeScript, Next.js, and TDesign desktop components.',
-  },
-  {
-    title: 'Routing and rendering',
-    description: 'Use the App Router with server layouts and client UI where needed.',
-  },
-  {
-    title: 'Next step',
-    description: 'Open app/page.tsx and start shaping __PROJECTNAME__.',
-  },
-]
+import ClientPage from './client-page'
 
 export default function Page() {
-  return (
-    <main className="page-shell">
-      <section className="hero-grid">
-        <Card className="hero-card" bordered={false}>
-          <Space direction="vertical" size={20}>
-            <p className="eyebrow">
-              <AppIcon style={{ marginRight: '6px', verticalAlign: 'middle' }} />
-              __TEMPLATENAME__
-            </p>
-            <div className="hero-copy">
-              <h1 className="hero-title">Create TDesign</h1>
-              <p className="hero-intro">
-                Your __PROJECTNAME__ project is ready. Start building with React,
-                TypeScript, Next.js, and TDesign.
-              </p>
-            </div>
-            <div className="action-row">
-              <Button theme="primary">Run pnpm dev</Button>
-              <Button variant="outline">Open app/page.tsx</Button>
-            </div>
-          </Space>
-        </Card>
-
-        <Card className="panel-card">
-          <div className="section-block">
-            <p className="section-heading">Getting started</p>
-            <div className="section-list">
-              {sections.map((item) => (
-                <div key={item.title} className="section-row">
-                  <span className="section-row-title">{item.title}</span>
-                  <p className="section-row-description">{item.description}</p>
-                </div>
-              ))}
-            </div>
-          </div>
-        </Card>
-      </section>
-    </main>
-  )
+  return <ClientPage />
 }