OpenClaw 项目实战：用 AI 30分钟搭建一个 Next.js 应用

目标与准备

本教程将通过一个真实项目——AI 工具导航站——展示如何使用 OpenClaw 在30分钟内从零搭建一个功能完整的 Next.js 应用。

我们将构建的功能：

• 工具列表页（支持按分类筛选）
• 工具详情页
• 搜索功能
• 响应式设计（移动端适配）

技术栈： Next.js 15 + TypeScript + Tailwind CSS + Prisma + SQLite

前提条件：

• 已安装 OpenClaw（参见安装指南）
• Node.js 18+ 和 npm
• 熟悉基本的 React/Next.js 概念

第0分钟：项目初始化

# 创建 Next.js 项目
npx create-next-app@latest ai-tools-nav --typescript --tailwind --app --src-dir
cd ai-tools-nav

# 安装额外依赖
npm install prisma @prisma/client

# 启动 OpenClaw
openclaw

第1-5分钟：数据库 Schema 设计

> /code 使用 Prisma 创建 schema.prisma 文件，包含 Tool 模型，
  字段有：id, name, slug, description, category, logoUrl, websiteUrl,
  tags (JSON字符串), pricing (free/freemium/paid), rating, reviewCount,
  createdAt, updatedAt。使用 SQLite 作为数据库。

OpenClaw 生成 prisma/schema.prisma：

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

model Tool {
  id          Int      @id @default(autoincrement())
  name        String
  slug        String   @unique
  description String
  category    String
  logoUrl     String?
  websiteUrl  String
  tags        String   @default("[]")
  pricing     String   @default("free")
  rating      Float    @default(0)
  reviewCount Int      @default(0)
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
}

# 初始化数据库
echo "DATABASE_URL="file:./dev.db"" > .env.local
npx prisma generate
npx prisma db push

⏱ 当前用时：5分钟

第6-12分钟：生成 Seed 数据和 API

> /code 创建 prisma/seed.ts，写入10条 AI 工具示例数据，
  包括 ChatGPT、Claude、Midjourney、GitHub Copilot 等工具，
  分类为 ai-chat、ai-image、ai-code 等

> /code 创建 src/app/api/tools/route.ts，
  支持 GET 请求，接受 category 和 search 查询参数，
  从 Prisma 查询并返回工具列表

> /code 创建 src/app/api/tools/[slug]/route.ts，
  返回单个工具的详细信息，slug 不存在时返回 404

运行 seed：

npx tsx prisma/seed.ts

⏱ 当前用时：12分钟

第13-20分钟：构建核心 UI 组件

> /code 创建 src/components/ToolCard.tsx，
  展示工具卡片：Logo、名称、描述（截断至2行）、分类标签、评分星级、
  定价徽章。点击跳转到 /tools/[slug]。使用 Tailwind CSS，
  带 hover 动画效果。

> /code 创建 src/components/CategoryFilter.tsx，
  横向滚动的分类筛选条，支持 "全部"、"AI对话"、"AI图像" 等分类，
  当前选中分类高亮显示，点击触发 onCategoryChange 回调。

> /code 创建 src/components/SearchBar.tsx，
  带搜索图标的输入框，300ms防抖，
  输入框右侧有清除按钮，触发 onSearch 回调。

⏱ 当前用时：20分钟

第21-26分钟：构建页面

> /code 创建 src/app/page.tsx（首页），
  使用 SearchBar 和 CategoryFilter 组件，
  通过 fetch 调用 /api/tools 获取数据，
  展示 ToolCard 网格（3列桌面端，2列平板，1列手机），
  搜索和筛选实时更新结果，无结果时显示空状态插图。

> /code 创建 src/app/tools/[slug]/page.tsx（工具详情页），
  展示工具完整信息：大 Logo、名称、评分、标签列表、
  详细描述、访问官网按钮，侧边栏展示相关工具推荐。
  使用 Next.js 的 generateMetadata 生成 SEO 元数据。

⏱ 当前用时：26分钟

第27-28分钟：遇到问题并修复

运行 npm run dev 后发现页面报错：

> 运行项目出现错误：
  Error: PrismaClient is not able to run in edge runtime.
  Please use PrismaClient with edge runtime support.
  at /api/tools/route.ts:5

🔍 Diagnosing...

Issue: Next.js App Router 的 API Routes 默认使用 Edge Runtime，
       而标准 PrismaClient 不支持 Edge Runtime。

Fix: 在 API Route 文件顶部添加 Runtime 声明，切换到 Node.js Runtime

// 在 route.ts 文件顶部添加：
export const runtime = 'nodejs';

? Apply fix to both route files? (Y/n)

一分钟解决问题！

⏱ 当前用时：28分钟

第29-30分钟：完善细节

> /code 为整个应用添加一个 Navbar 组件，包含 Logo、
  导航链接（首页、分类、关于），响应式汉堡菜单，
  并更新 src/app/layout.tsx 引入 Navbar。

> /code 为所有页面添加 Loading 骨架屏，
  使用 Tailwind 的 animate-pulse 效果

⏱ 当前用时：30分钟 ✅

最终效果展示

npm run dev

打开 http://localhost:3000，你将看到：

• 首页：10个工具卡片整齐排列，搜索框和分类筛选正常工作
• 详情页：完整的工具信息展示，附带相关工具推荐
• 响应式：在手机浏览器中打开，自动适配移动端布局

代码统计

通过 OpenClaw，30分钟内我们完成了：

常见问题

Q：AI 生成的代码质量如何保证？

A：始终对生成的代码进行 Review，特别注意安全相关代码（如数据库查询、用户输入处理）。OpenClaw 生成的代码是起点，你需要根据实际需求调整。

Q：30分钟能完成的项目能上生产吗？

A：本教程的项目缺少用户认证、错误边界处理、完整的测试覆盖等，距离生产级应用还有距离。但这个框架足以作为原型演示或个人项目。

Q：如何处理 OpenClaw 生成的代码与现有代码风格不一致的问题？

A：在 .openclaw 文件中配置详细的系统提示，说明项目的代码规范。参见"OpenClaw 高级技巧"教程。

下一步

本教程展示了 OpenClaw 在全栈项目开发中的强大能力。建议继续学习：

• OpenClaw 高级技巧：自定义提示词和多文件编辑
• OpenClaw Git 集成：为项目添加规范的版本管理