Test Claude Code Firecrawl

使用 shadcn/ui 的 Next.js 应用

一个使用Next.js 15、TypeScript、Tailwind CSS以及美观的shadcn/ui组件构建的现代Web应用程序。此项目还包括用于Firecrawl集成的MCP（模型上下文协议）配置。

特点/特性

• ⚡（闪电符号，常用于表示速度、能量或惊喜等） Next.js 15 使用 App Router
• 🎨（颜料、绘画或艺术创作的符号） shadcn/ui（可翻译为“Shadcn的用户界面组件库”或根据具体上下文简化为“Shadcn UI”，但直接保留原名在技术语境中也很常见） 使用 Tailwind CSS 构建组件
• 🔒 表示“锁定”或“安全”的符号。 TypeScript 为了类型安全
• 🌙 月亮（或“月光”） 深色模式 支持
• 🔧 修理工具或扳手的符号 ESLint（艾斯利恩特） 配置
• 🤖 表示“机器人”或“机器人图标”。 MCP（Minimum Capital Requirement） 与Firecrawl的集成

技术栈

• 框架： Next.js 15
• 语言: TypeScript
• 造型设计： Tailwind CSS
• 组件: shadcn/ui（可译为“shadcn的用户界面组件库”或根据具体上下文简化为“shadcn UI”）
• 包管理器npm（Node Package Manager，节点包管理器）

入门指南

1. 安装依赖项：

npm install

1. 运行开发服务器：

npm run dev

1. 打开 http://localhost:3000 翻译为中文是：“本地主机上的3000端口”。不过，通常我们不会直接翻译这样的网址，而是根据上下文来解释其含义。在这个例子中，它指的是运行在本地计算机（localhost）上的某个Web服务或应用，监听3000端口，可以通过浏览器访问 在您的浏览器中。

项目结构

src/
├── app/                 # Next.js app router pages
│   ├── globals.css     # Global styles with shadcn/ui theme
│   ├── layout.tsx      # Root layout component
│   └── page.tsx        # Home page
├── components/         # React components
│   └── ui/            # shadcn/ui components
└── lib/               # Utility functions
    └── utils.ts       # shadcn/ui utilities

添加 shadcn/ui 组件

使用CLI添加新的shadcn/ui组件：

npx shadcn@latest add [component-name]

可用的组件包括：按钮、卡片、输入框、选择框、对话框，以及更多。

了解更多

• Next.js 文档
• shadcn/ui 文档
• Tailwind CSS 文档

在Vercel上部署

部署你的Next.js应用最简单的方法是使用 Vercel 平台。

MCP集成

这个项目包括为Firecrawl配置MCP（多通道处理器/模块控制协议，具体含义根据上下文确定） .mcp.json这允许您通过Claude Code的MCP集成使用网页抓取和数据提取功能。