第一章：前端开发概述——AI 工具全景与 Next.js App Router

第一章：前端开发概述——AI 工具全景与 Next.js App Router

“2026 年的前端 AI 工具，按使用场景分为三层：设计到代码、IDE 级代码生成、全栈生成。”

1.1 AI 前端工具分层

设计到代码（Design-to-Code）

  • v0（Vercel）：描述界面，生成 React + Tailwind 组件
  • 21st.dev：社区驱动的 AI 组件库
  • Figma Dev Mode + AI：从设计稿生成代码

IDE 级代码生成

  • Cursor：最主流的 AI IDE，Agent 模式能跨文件理解和修改
  • GitHub Copilot：深度集成在 VS Code 里

全栈生成（Scaffold Level）

  • Bolt.new / StackBlitz：自然语言描述整个应用
  • Lovable：更偏向 UI 的全栈生成

1.2 Next.js App Router 为什么是首选

Next.js 14+ 的 App Router 是目前 React 生态中最被 AI 工具理解的框架。

Server Components + Client Components 分工：

graph LR
    A[Server Component] -->|默认渲染| B[服务端完成]
    A -->|无客户端JS| C[减少Bundle]
    D[Client Component] -->|"use client"| E[浏览器运行]
    E -->|交互逻辑| F[Hooks/事件]
  • Server Component（默认）：服务端渲染，直接访问数据库/API，不能用 hooks
  • Client Component（"use client"）：浏览器运行，可以使用 hooks

1.3 App Router 目录结构

app/
├── layout.tsx           # 根布局
├── page.tsx             # 首页
├── globals.css          # 全局样式
├── (marketing)/         # 路由组：营销页面
│   ├── page.tsx         # /
│   └── pricing/page.tsx # /pricing
├── (app)/               # 路由组：应用页面
│   ├── layout.tsx       # 应用布局
│   └── dashboard/
│       └── page.tsx     # /dashboard
└── api/                 # API Routes

1.4 TypeScript 使用原则

必须定义类型的地方：

  • API 响应的数据结构
  • 组件的 props
  • 全局状态（Zustand store）

可以用 any 的地方：

  • 快速原型，后续再补
  • 第三方库缺少类型定义
  • 类型系统无法推断的复杂泛型

1.5 项目级 AI 配置

.cursorrules 示例：

这是一个 Next.js 15 App Router + TypeScript + Tailwind CSS + shadcn/ui 项目。

关键规则：
- 默认 Server Component，只有需要交互的组件加 "use client"
- 样式只用 Tailwind CSS + shadcn/ui，不写内联 style
- 数据获取：Server Component 直接 fetch，Client Component 用 SWR
- 认证 token 存 httpOnly Cookie，不存 localStorage
- API 调用通过 lib/api.ts 封装
- 表单用 React Hook Form + Zod

当前版本：Next.js 15, React 19, TypeScript 5, Tailwind 3

本章小结

  1. AI 工具三层：Design-to-Code、IDE 级、全栈生成
  2. App Router：Server Component 默认，Client Component 按需
  3. TypeScript：实用主义，不追求 100% 类型安全
  4. AI 配置：项目级 .cursorrules 统一规范

本章提示词模板

生成组件并添加 AI 规则

为以下项目创建 .cursorrules 配置文件：

项目技术栈：
- Next.js 15 App Router
- TypeScript 5
- Tailwind CSS 3 + shadcn/ui
- API 后端：FastAPI

需要包含的规范：
1. Server/Client Component 使用原则
2. 样式方案（只用 Tailwind + shadcn/ui）
3. API 调用封装规则
4. 表单处理方案
5. 认证 token 存储规则

分析页面结构

分析以下页面需求，确定组件拆分方案：

页面：[描述页面功能]

请输出：
1. 哪些部分用 Server Component（不需要交互）
2. 哪些部分用 Client Component（需要 hooks/事件）
3. 推荐的组件树结构
4. shadcn/ui 组件选择建议

继续阅读：第二章：项目搭建