fix(next): 修复 StackBlitz 启动及服务端渲染问题

Author: liweijie0812

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

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": {

templates/react-next/.stackblitzrc

@@ -1,4 +1,4 @@
 {
   "installDependencies": false,
-  "startCommand": "pnpm install && pnpm dev"
+  "startCommand": "pnpm install && pnpm exec next dev --webpack"
 }

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

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 />
 }