构建Next.js AI工具目录的提示词
用于构建可搜索的Next.js AI工具目录的AI智能体提示词，支持MDX数据文件、分类筛选和静态生成。
CursorClaude CodeCodexWindsurf Next.jsTypeScriptTailwind
将此提示词交给你的智能体，用于构建一个静态生成的、SEO友好的AI工具目录，支持分类筛选、客户端搜索和每个工具的详情页——当平面MDX文件足够时，无需使用数据库。
主要提示词
You are building a new Next.js 15 App Router project using TypeScript and Tailwind CSS v4.
Task: build an AI tool directory site.
Data model — each tool is a `.mdx` file in `src/data/tools/` with this frontmatter: name, slug, tagline, description, category, website, pricing ('free'|'freemium'|'paid'), tags (string[]), logo (relative path to public/).
Requirements:- `src/lib/tools.ts`: read all MDX files at build time using `fs` + `gray-matter`; export `getAllTools()` returning `Tool[]` and `getToolBySlug(slug)` returning `Tool | undefined`.- `src/app/page.tsx`: static page showing a grid of `<ToolCard>` components. - A `<CategoryFilter>` client component that filters by category using URL search params (`?category=writing`). Use `useSearchParams` — no external state library. - A `<SearchBar>` client component that does client-side substring match on name and tagline using `useSearchParams` (`?q=cursor`).- `src/app/tools/[slug]/page.tsx`: static detail page with `generateStaticParams` and `generateMetadata`. Include og:title, og:description, og:image (the tool logo).- `src/app/categories/[category]/page.tsx`: static list filtered by category.- Seed data: create 5 real AI coding tools as MDX files (Cursor, GitHub Copilot, Claude Code, Codeium, Tabnine) with accurate free/paid info.- Do NOT use a database, Contentlayer, or next-mdx-remote. Use `gray-matter` + `fs` only.
Stop and list all planned files before writing code.实现注意事项
getAllTools()必须仅在服务器端运行；在客户端组件中调用它会将fs暴露给浏览器并导致构建崩溃。将数据作为props传递给客户端组件。- 为
[slug]使用的generateStaticParams应调用getAllTools()并映射到{ slug }对象。 - 对于分类页面，应从工具数据中推导出分类列表，而不是硬编码。
预期文件变更
src/lib/tools.ts (new)src/app/page.tsx (new)src/app/tools/[slug]/page.tsx (new)src/app/categories/[category]/page.tsx (new)src/components/ToolCard.tsx (new)src/components/CategoryFilter.tsx (new — Client)src/components/SearchBar.tsx (new — Client)src/data/tools/cursor.mdx (new)src/data/tools/github-copilot.mdx (new)src/data/tools/claude-code.mdx (new)src/data/tools/codeium.mdx (new)src/data/tools/tabnine.mdx (new)验收标准
bun run build命令退出代码为0，并为每个工具slug生成静态页面。- 点击分类筛选器会更新URL并过滤网格，而无需完全重新加载。
- 每个工具详情页在HTML的
<head>中都有唯一的og:title和og:description。 - 搜索”cursor”时仅显示Cursor卡片。
测试命令
bun run typecheckbun run buildbun run startcurl -s http://localhost:3000/tools/cursor | grep 'og:title'# navigate to /?category=writing and confirm filter常见AI错误
- 在客户端组件中调用
getAllTools()，导致fs模块错误而破坏构建。 - 在
[slug]页面上忘记generateStaticParams，导致静态导出出现404错误。 - 在提示词明确禁止的情况下使用
next-mdx-remote。 - 硬编码分类列表，而不是从工具数据中推导。
修复提示词
The build fails because `fs` is used in a client component, or static pages are not generated.Fix in order:1. Move `getAllTools()` to a Server Component and pass the `tools` array as a prop to `CategoryFilter` and `SearchBar`.2. Add `export async function generateStaticParams()` to `src/app/tools/[slug]/page.tsx`.3. Confirm `gray-matter` is installed: `bun add gray-matter`.Show only the corrected diff.