AI导哈

Next.js应用框架

一个基于Next.js 15、TypeScript、Tailwind CSS和shadcn/ui组件的现代Web应用程序框架，支持暗黑模式和Firecrawl集成。

  • by jon-chun
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 jon-chun/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的集成

技术栈

入门指南

  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]

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

了解更多

在Vercel上部署

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

MCP集成

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

相关 MCP