SuperAPI AI 工具集

nextjs-boilerplate

前端与建站

查看项目

更新于 10-16 08:03

技能介绍

用途:在用户要求创建新的 Next.js 项目、搭建带 Tailwind CSS 的 React 应用、引入 shadcn/ui 组件或构建 AI 聊天界面时,用于快速启动一个生产可用的 Next.js 开发环境。

技术栈:Next.js 14+(App Router,支持 SSR/SSG)、Tailwind CSS(工具类优先样式)、shadcn/ui(可访问、可定制组件)、assistant-ui(预置 AI 聊天界面组件)、TypeScript 严格模式。

主要步骤:先用 npx create-next-app@latest my-app --typescript --tailwind --eslint --app --src-dir --import-alias "@/*" 创建项目并进入目录;再用 npx shadcn@latest init 初始化组件库;随后用 npx shadcn@latest add button card input label 等命令按需添加组件;如需 AI 聊天界面,可用 npx assistant-ui@latest create 或 pnpm add @assistant-ui/react @assistant-ui/react-markdown 安装。

项目结构与配置:采用 src/ 目录,包含 app/(layout.tsx、page.tsx、globals.css、路由组)、components/ui/、lib/utils.ts 与 hooks/;Tailwind 使用 class 策略的暗色模式与 CSS 变量主题;TypeScript 建议开启 strict 与 noUncheckedIndexedAccess;ESLint 继承 next/core-web-vitals。常见模式包括带 ThemeProvider 的根布局、cn() 工具函数合并类名、react-hook-form 与 zod 表单校验,以及基于 Thread、useVercelAIRuntime、useChat 的聊天组件与 /api/chat 流式接口。

验证与排错:运行 pnpm dev、pnpm tsc --noEmit、pnpm lint 检查;若 Tailwind 不生效需检查 globals.css 指令与内容路径;组件缺失可用 npx shadcn@latest add [name] 补装;主题切换导致水合不匹配时给 html 标签加 suppressHydrationWarning。

限制:不适合简单静态站点、非 React 项目或使用其他样式方案(CSS Modules、styled-components)的项目,也不适合已有不同工具链的存量项目。