# Prompt para Construir un Directorio de Herramientas de IA con Next.js > Prompt para agente de IA para construir un directorio de herramientas de IA en Next.js con archivos de datos MDX, filtros de categoría y generación estática. **Type:** Prompt **Tools:** Cursor, Claude Code, Codex, Windsurf **Stack:** Next.js, TypeScript, Tailwind **Difficulty:** medium **Updated:** 2026-06-08 --- Proporciona este prompt a tu agente para construir un directorio de herramientas de IA generado estáticamente y optimizado para SEO, con filtrado por categoría, búsqueda del lado del cliente y una página de detalle por herramienta — sin necesidad de recurrir a una base de datos cuando los archivos MDX planos son suficientes. ## Prompt Principal ```txt title="Main Prompt" 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 `` components. - A `` client component that filters by category using URL search params (`?category=writing`). Use `useSearchParams` — no external state library. - A `` 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. ``` ## Notas de Implementación - `getAllTools()` debe ejecutarse solo del lado del servidor; llamarlo en un Componente Cliente expondrá `fs` al navegador y romperá la compilación. Pasa los datos como props a los componentes cliente. - `generateStaticParams` para `[slug]` debe llamar a `getAllTools()` y mapear a objetos `{ slug }`. - Para las páginas de categorías, deriva la lista de categorías de los datos de las herramientas en lugar de codificarla. ## Cambios de Archivos Esperados ```txt 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) ``` ## Criterios de Aceptación - `bun run build` termina con código 0 y genera una página estática para cada slug de herramienta. - Hacer clic en un filtro de categoría actualiza la URL y filtra la cuadrícula sin recargar completamente. - Cada página de detalle de herramienta tiene `og:title` y `og:description` únicos en el `` de HTML. - Buscar "cursor" muestra solo la tarjeta de Cursor. ## Comandos de Prueba ```bash bun run typecheck bun run build bun run start curl -s http://localhost:3000/tools/cursor | grep 'og:title' # navigate to /?category=writing and confirm filter ``` ## Errores Comunes de la IA - Llamar a `getAllTools()` dentro de un Componente Cliente, rompiendo la compilación con un error del módulo `fs`. - Olvidar `generateStaticParams` en la página `[slug]`, causando errores 404 en la exportación estática. - Usar `next-mdx-remote` cuando el prompt lo prohíbe explícitamente. - Codificar la lista de categorías en lugar de derivarla de los datos de las herramientas. ## Prompt de Corrección ```txt title="Fix Prompt" 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. ```