React Full Stack Starter

一个基于 pnpm workspace 的 React 全栈脚手架，前端使用 Vite，服务端使用 Next.js API（BFF），并提供完整的技术点示例。

技术栈

• 前端：React + TypeScript + Vite
• 路由：React Router
• 状态：Zustand（本地状态） + TanStack Query（服务端状态）
• Hooks：ahooks
• UI：Tailwind CSS + shadcn/ui
• 服务端：Next.js（仅 API）
• 代码规范：Biome
• 包管理：pnpm

目录结构

.
├─ apps/
│  ├─ server/            # Next.js API 服务（3000）
│  └─ web/               # Vite 前端应用（5173）
├─ packages/
│  └─ shared/            # 前后端共享类型
├─ biome.json
├─ package.json
├─ pnpm-workspace.yaml
└─ tsconfig.base.json

快速开始

pnpm install
pnpm dev

启动后：

• 前端：http://localhost:5173
• 服务端：http://localhost:3000
• API 示例：
  • GET /api/health
  • GET /api/todos

环境变量

前端支持通过 VITE_API_BASE_URL 指向服务端地址：

cp apps/web/.env.example apps/web/.env

默认值为 http://localhost:3000。

常用脚本

在仓库根目录执行：

• pnpm dev：并行启动前后端
• pnpm build：构建所有包
• pnpm lint：运行 Biome 检查
• pnpm typecheck：运行 TypeScript 检查
• pnpm format：运行 Biome 自动格式化

技术点示例位置

• React Router：apps/web/src/app/router.tsx
• Zustand：apps/web/src/store/counter-store.ts
• TanStack Query：apps/web/src/routes/ExamplesPage.tsx
• ahooks：apps/web/src/routes/ExamplesPage.tsx
• Tailwind + shadcn/ui：apps/web/src/index.css、apps/web/src/components/ui/button.tsx
• Next.js API：apps/server/app/api/*/route.ts
• Shared Types：packages/shared/src/api.ts

Commit 规范

推荐使用 Conventional Commits：

• feat(scope): ...
• fix(scope): ...
• chore(scope): ...
• docs(scope): ...