技术栈与依赖

在选择技术栈时，我们充分考虑了项目的需求、性能、可维护性和开发效率，最终选择了现代化且功能强大的技术组合。

核心技术栈

前端框架

Next.js 15.4 (App Router)

• 基于 React 19 构建的现代化 Web 框架
• 支持服务器端渲染（SSR）和静态生成（SSG）
• 提供优秀的性能和 SEO 支持
• 内置 API 路由功能
• 支持 React Server Components

React 19

• 最新稳定版本的 React 库
• 提供强大的组件化开发能力
• 支持 Hooks 和并发模式

编程语言

TypeScript 5.9

• JavaScript 的超集，提供静态类型检查
• 提高代码质量和开发体验
• 更好的 IDE 支持和自动补全

样式与 UI

Tailwind CSS 4

• 实用优先的 CSS 框架
• 提供高度可定制的设计系统
• 通过类名直接控制样式，避免样式冲突

Shadcn/ui + Radix UI

• Shadcn/ui 提供可复制粘贴的 React 组件
• Radix UI 提供无障碍访问的底层组件
• 组件可访问性符合 WCAG 标准

lucide-react

• 轻量级图标库
• 与 React 深度集成
• 提供一致的视觉风格

状态管理

Zustand 5

• 轻量级状态管理库
• 简单易用的 API
• 支持中间件和异步操作

数据获取

TanStack Query (React Query)

• 强大的数据获取和状态管理库
• 提供缓存、后台更新和防抖功能
• 简化服务端数据处理

开发工具

包管理器

pnpm 9.11.0

• 高效的包管理器
• 节省磁盘空间和安装时间
• 支持 monorepo 结构

代码质量

Biome

• 集成的代码检查、格式化和 linting 工具
• 替代 ESLint、Prettier 和 Stylelint
• 极快的执行速度

TypeScript

• 编译时类型检查
• 提高代码可靠性和可维护性

测试工具

Vitest

• 基于 Vite 的测试框架
• 快速的单元测试执行
• 支持 TypeScript 和 JSX

Testing Library

• 用户行为导向的测试工具
• 提供 React 组件测试支持

构建工具

Turbopack

• Next.js 内置的增量打包工具
• 提供极快的开发构建速度
• 支持 HMR（热模块替换）

依赖管理

生产依赖

{
  "@clerk/elements": "^0.23.57",
  "@clerk/nextjs": "^6.31.4",
  "@mdx-js/mdx": "^3.1.0",
  "@mdx-js/react": "^3.1.0",
  "@radix-ui/react-alert-dialog": "^1.1.15",
  "@radix-ui/react-avatar": "^1.1.10",
  "@radix-ui/react-checkbox": "^1.3.3",
  "@radix-ui/react-collapsible": "^1.1.12",
  "@radix-ui/react-dialog": "^1.1.15",
  "@radix-ui/react-dropdown-menu": "^2.1.16",
  "@radix-ui/react-label": "^2.1.7",
  "@radix-ui/react-select": "^2.2.6",
  "@radix-ui/react-separator": "^1.1.7",
  "@radix-ui/react-slot": "^1.2.3",
  "@radix-ui/react-switch": "^1.2.6",
  "@types/prismjs": "^1.26.5",
  "cheerio": "^1.1.2",
  "class-variance-authority": "^0.7.1",
  "clsx": "^2.1.1",
  "fast-glob": "^3.3.3",
  "gray-matter": "^4.0.3",
  "immer": "^10.1.1",
  "lodash": "^4.17.21",
  "lucide-react": "^0.525.0",
  "next": "^15.5.0",
  "next-themes": "^0.4.6",
  "postcss": "^8.5.6",
  "prismjs": "^1.30.0",
  "react": "^19.1.1",
  "react-dom": "^19.1.1",
  "react-intersection-observer": "^9.16.0",
  "remark-gfm": "^4.0.1",
  "remark-parse": "^11.0.0",
  "remark-rehype": "^11.1.2",
  "tailwind-merge": "^3.3.1",
  "unified": "^11.0.5",
  "vaul": "^1.1.2",
  "zustand": "^5.0.8"
}

开发依赖

{
  "@biomejs/biome": "^2.2.2",
  "@tailwindcss/postcss": "^4.1.12",
  "@tailwindcss/typography": "^0.5.16",
  "@testing-library/jest-dom": "^6.8.0",
  "@testing-library/react": "^16.3.0",
  "@types/jest": "^30.0.0",
  "@types/lodash": "^4.17.20",
  "@types/node": "^24.3.0",
  "@types/react": "^19.1.11",
  "@types/react-dom": "^19.1.7",
  "@types/ws": "^8.18.1",
  "jsdom": "^26.1.0",
  "lint-staged": "^16.1.5",
  "rimraf": "^6.0.1",
  "tailwindcss": "^4.1.12",
  "typescript": "^5.9.2",
  "vitest": "^3.2.4"
}

部署与托管

代码托管

GitHub

• 强大的版本控制和协作功能
• 完善的 CI/CD 集成
• 丰富的开源生态

部署平台

Vercel

• 专为 Next.js 优化的部署平台
• 全球 CDN 加速
• 自动 HTTPS 配置
• 简单的部署流程

环境要求

Node.js 版本

项目需要 Node.js 版本 >= 22.x

pnpm 版本

项目需要 pnpm 版本 >= 9.11.0

技术选型优势

性能优势

1. Next.js SSR/SSG - 提供优秀的首屏加载性能
2. Turbopack - 极快的开发构建速度
3. Vercel 部署 - 全球 CDN 加速和边缘计算

开发体验

1. TypeScript - 提供类型安全和更好的 IDE 支持
2. Biome - 集成的代码质量工具链
3. Tailwind CSS - 实用优先的样式系统，提高开发效率

可维护性

1. 模块化架构 - 清晰的代码组织结构
2. Zustand - 简单的状态管理
3. TanStack Query - 统一的数据获取和缓存管理

未来技术规划

待集成技术

1. 国际化支持 - next-i18next 或 react-intl
2. SEO 优化 - next-seo 和 next-sitemap
3. 性能监控 - Vercel Analytics 和 Sentry
4. 全文搜索 - Meilisearch 或 Algolia

技术升级计划

1. 持续跟进 Next.js 和 React 的新特性
2. 定期更新依赖包到稳定版本
3. 优化构建配置和性能调优

通过这套现代化的技术栈，我们能够构建出高性能、易维护且具有良好开发体验的 Web 应用。