项目教程仓库https://github.com/ZIQI-a/AI_Agent_study 成品项目地址https://github.com/ZIQI-a/huamiao_Agent本章目标要做的事创建话喵项目理解项目结构跑起开发服务器学到的知识Next.js 是什么为什么选它App Router 的文件路由系统服务端组件 vs 客户端组件页面、布局、加载状态的关系2.1 为什么选 Next.js作为前端开发者你可能用过 React、Vue、Nuxt 等框架。Next.js 有几个关键优势React 只负责 UI 渲染路由、SSR、构建都要自己配 Next.js React 路由 SSR API Routes 构建工具开箱即用 为什么 AI 应用特别适合 Next.js ✅ 内置 API Routes → 后端 API 不需要额外服务 ✅ 服务端组件 → API Key 只在服务端不会泄露到前端 ✅ 流式响应支持 → AI 的打字机效果天然支持 ✅ Vercel 部署 → 一键部署和 AI SDK 同一家公司 ✅ 全栈 TypeScript → 类型安全前后端一套语言2.2 创建项目# 进入你的工作目录cd/Users/Code/学习练习代码/AGENTS# 创建 Next.js 项目pnpmdlx create-next-applatest huamiao--typescript--tailwind--eslint--app--src-dir --import-alias/*# 各参数含义# --typescript → 使用 TypeScript# --tailwind → 集成 Tailwind CSS# --eslint → 代码检查# --app → 使用 App Router不是旧的 Pages Router# --src-dir → 源码放在 src/ 目录下# --import-alias → 路径别名 / 指向 src/安装过程中可能问你几个问题选择默认值即可。# 进入项目目录cdhuamiao# 启动开发服务器pnpmdev打开浏览器访问http://localhost:3000你应该能看到 Next.js 的默认欢迎页面。2.3 项目目录结构huamiao/ ├── src/ │ ├── app/ ← 核心App Router 目录 │ │ ├── favicon.ico ← 网站图标 │ │ ├── globals.css ← 全局样式 │ │ ├── layout.tsx ← 根布局所有页面共享 │ │ └── page.tsx ← 首页/ 路由 │ ├── components/ ← 组件目录后面创建 │ └── lib/ ← 工具函数后面创建 ├── public/ ← 静态资源图片、字体等 ├── next.config.ts ← Next.js 配置 ├── tailwind.config.ts ← Tailwind 配置 ├── tsconfig.json ← TypeScript 配置 ├── package.json ← 项目依赖 └── pnpm-lock.lock ← 依赖锁定文件知识点node_modules 去哪了pnpm 使用全局存储 符号链接的方式node_modules比 npm 小很多。依赖的实际文件存在 pnpm 的全局目录中项目里只是链接。2.4 App Router 核心概念App Router 是 Next.js 13 引入的新路由系统用文件夹结构定义路由。文件即路由src/app/ ├── page.tsx → / 首页 ├── about/ │ └── page.tsx → /about 关于页 ├── articles/ │ ├── page.tsx → /articles 文章列表 │ └── create/ │ └── page.tsx → /articles/create创建文章 └── poems/ └── page.tsx → /poems 诗词页规则很简单文件夹名 URL 路径段page.tsx 该路径对应的页面组件特殊文件名page.tsx → 页面用户访问这个 URL 时看到的内容 layout.tsx → 布局包裹子页面不会随页面切换重新渲染 loading.tsx → 加载状态页面加载时显示的 UI error.tsx → 错误处理页面出错时显示的 UI not-found.tsx → 404 页面2.5 布局文件 layout.tsx打开src/app/layout.tsx// 这是根布局所有页面都会被它包裹importtype{Metadata}fromnext;import{Inter}fromnext/font/google;import./globals.css;constinterInter({subsets:[latin]});// 页面的元信息标题、描述exportconstmetadata:Metadata{title:Create Next App,description:Generated by create next app,};// 根布局组件// children 是当前页面的内容exportdefaultfunctionRootLayout({children,}:{children:React.ReactNode;}){return({children});}布局的作用┌─────────────────────────────────┐ │ layout.tsx │ │ ┌─────────────────────────────┐ │ │ │ │ │ │ │ │ │ │ │ ┌───────────────────┐ │ │ │ │ │ {children} │ │ │ │ │ │ 这里是 page.tsx │ │ │ │ │ │ │ │ │ │ │ └───────────────────┘ │ │ │ │ │ │ │ │ │ │ │ └─────────────────────────────┘ │ └─────────────────────────────────┘切换页面时布局不会重新渲染只有 children 部分会更新。这意味着导航栏、侧边栏等放在布局中是高效的。2.6 页面文件 page.tsx打开src/app/page.tsx// 这是首页的内容exportdefaultfunctionHome(){return(Hello Next.js!);}现在我们来改成话喵的首页exportdefaultfunctionHome(){return(话喵AI智能创作平台);}保存后浏览器会自动刷新热更新你会看到页面内容变了。2.7 服务端组件 vs 客户端组件这是 App Router 最重要的概念之一。服务端组件默认// 这是一个服务端组件默认// 它在服务器上渲染HTML 直接发给浏览器exportdefaultfunctionServerComponent(){return我在服务器上渲染;}特点在服务器上执行不在浏览器执行可以直接访问数据库、文件系统、环境变量不能用 useState、useEffect 等 React Hooks不能绑定事件onClick 等客户端组件use client;// ← 加了这行就是客户端组件import{useState}fromreact;exportdefaultfunctionClientComponent(){const[count,setCount]useState(0);return(setCount(count1)}点击了{count}次);}特点在浏览器上执行可以用 React Hooks可以绑定事件不能直接访问数据库等服务端资源如何选择需要交互点击、输入、动画 → use client 需要访问数据库/API Key → 服务端组件不加 use client 需要展示数据 → 服务端组件 需要状态管理 → use client 简单规则 能用服务端组件就用服务端组件 需要交互时才加 use client知识点为什么服务端组件是默认性能更好不发送 JS 到浏览器安全敏感数据API Key不会暴露到前端SEO 友好HTML 在服务器生成只有需要交互的部分才变成客户端组件2.8 创建第一个路由让我们为话喵创建几个页面。创建文章创作页面mkdir-psrc/app/articles/create创建src/app/articles/create/page.tsxexportdefaultfunctionCreateArticle(){return(文章创作 输入标题AI帮你写文章);}创建古诗词页面mkdir-psrc/app/poems创建src/app/poems/page.tsxexportdefaultfunctionPoems(){return(古诗词生成 输入名词AI创作古诗词);}现在访问http://localhost:3000→ 首页http://localhost:3000/articles/create→ 文章创作页http://localhost:3000/poems→ 古诗词页三个页面互相独立但共享根布局。2.9 加载状态 loading.tsx创建src/app/articles/create/loading.tsxexportdefaultfunctionLoading(){return();}当文章创作页面加载时比如等待 API 响应Next.js 会自动显示这个 loading 组件。用户体验更好。本章小结概念说明App Router文件夹结构定义路由page.tsx页面组件对应一个 URLlayout.tsx布局组件包裹子页面不随页面切换重渲染loading.tsx加载状态页面加载时自动显示服务端组件默认在服务器执行可访问数据库和环境变量客户端组件加 “use client”在浏览器执行可交互动手验证pnpm dev启动项目访问http://localhost:3000看到话喵首页访问http://localhost:3000/articles/create看到文章创作页访问http://localhost:3000/poems看到古诗词页修改某个页面的内容保存后浏览器自动刷新下一章预告我们将引入 Tailwind CSS 和 shadcn/ui 组件库搭建话喵的整体 UI 布局 —— 左侧导航栏 主内容区设计猫咪主题的配色方案。如果这个教程对你有帮助欢迎 ⭐ Star 支持一下 教程仓库https://github.com/ZIQI-a/AI_Agent_study 成品项目https://github.com/ZIQI-a/huamiao_Agent