{
  "id": "build-a-nextjs-ai-tool-directory",
  "type": "prompts",
  "category": "prompts",
  "locale": "es",
  "url": "/es/prompts/build-a-nextjs-ai-tool-directory",
  "title": "Prompt para Construir un Directorio de Herramientas de IA con Next.js",
  "description": "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.",
  "tools": [
    "Cursor",
    "Claude Code",
    "Codex",
    "Windsurf"
  ],
  "stack": [
    "Next.js",
    "TypeScript",
    "Tailwind"
  ],
  "tags": [
    "nextjs",
    "typescript",
    "tailwind",
    "seo",
    "search"
  ],
  "difficulty": "medium",
  "updated": "2026-06-08",
  "markdown": "Proporciona este prompt a tu agente para construir un directorio de herramientas de IA generado estáticamente y optimizado para SEO,\ncon filtrado por categoría, búsqueda del lado del cliente y una página de detalle por herramienta —\nsin necesidad de recurrir a una base de datos cuando los archivos MDX planos son suficientes.\n\n## Prompt Principal\n\n```txt title=\"Main Prompt\"\nYou are building a new Next.js 15 App Router project using TypeScript and Tailwind CSS v4.\n\nTask: build an AI tool directory site.\n\nData model — each tool is a `.mdx` file in `src/data/tools/` with this frontmatter:\n  name, slug, tagline, description, category, website, pricing ('free'|'freemium'|'paid'),\n  tags (string[]), logo (relative path to public/).\n\nRequirements:\n- `src/lib/tools.ts`: read all MDX files at build time using `fs` + `gray-matter`; export\n  `getAllTools()` returning `Tool[]` and `getToolBySlug(slug)` returning `Tool | undefined`.\n- `src/app/page.tsx`: static page showing a grid of `<ToolCard>` components.\n  - A `<CategoryFilter>` client component that filters by category using URL search params\n    (`?category=writing`). Use `useSearchParams` — no external state library.\n  - A `<SearchBar>` client component that does client-side substring match on name and tagline\n    using `useSearchParams` (`?q=cursor`).\n- `src/app/tools/[slug]/page.tsx`: static detail page with `generateStaticParams` and\n  `generateMetadata`. Include og:title, og:description, og:image (the tool logo).\n- `src/app/categories/[category]/page.tsx`: static list filtered by category.\n- Seed data: create 5 real AI coding tools as MDX files (Cursor, GitHub Copilot, Claude Code,\n  Codeium, Tabnine) with accurate free/paid info.\n- Do NOT use a database, Contentlayer, or next-mdx-remote. Use `gray-matter` + `fs` only.\n\nStop and list all planned files before writing code.\n```\n\n## Notas de Implementación\n\n- `getAllTools()` debe ejecutarse solo del lado del servidor; llamarlo en un Componente Cliente expondrá `fs`\n  al navegador y romperá la compilación. Pasa los datos como props a los componentes cliente.\n- `generateStaticParams` para `[slug]` debe llamar a `getAllTools()` y mapear a objetos `{ slug }`.\n- Para las páginas de categorías, deriva la lista de categorías de los datos de las herramientas en lugar de codificarla.\n\n## Cambios de Archivos Esperados\n\n```txt\nsrc/lib/tools.ts                              (new)\nsrc/app/page.tsx                              (new)\nsrc/app/tools/[slug]/page.tsx                 (new)\nsrc/app/categories/[category]/page.tsx        (new)\nsrc/components/ToolCard.tsx                   (new)\nsrc/components/CategoryFilter.tsx             (new — Client)\nsrc/components/SearchBar.tsx                  (new — Client)\nsrc/data/tools/cursor.mdx                     (new)\nsrc/data/tools/github-copilot.mdx            (new)\nsrc/data/tools/claude-code.mdx               (new)\nsrc/data/tools/codeium.mdx                   (new)\nsrc/data/tools/tabnine.mdx                   (new)\n```\n\n## Criterios de Aceptación\n\n- `bun run build` termina con código 0 y genera una página estática para cada slug de herramienta.\n- Hacer clic en un filtro de categoría actualiza la URL y filtra la cuadrícula sin recargar completamente.\n- Cada página de detalle de herramienta tiene `og:title` y `og:description` únicos en el `<head>` de HTML.\n- Buscar \"cursor\" muestra solo la tarjeta de Cursor.\n\n## Comandos de Prueba\n\n```bash\nbun run typecheck\nbun run build\nbun run start\ncurl -s http://localhost:3000/tools/cursor | grep 'og:title'\n# navigate to /?category=writing and confirm filter\n```\n\n## Errores Comunes de la IA\n\n- Llamar a `getAllTools()` dentro de un Componente Cliente, rompiendo la compilación con un error del módulo `fs`.\n- Olvidar `generateStaticParams` en la página `[slug]`, causando errores 404 en la exportación estática.\n- Usar `next-mdx-remote` cuando el prompt lo prohíbe explícitamente.\n- Codificar la lista de categorías en lugar de derivarla de los datos de las herramientas.\n\n## Prompt de Corrección\n\n```txt title=\"Fix Prompt\"\nThe build fails because `fs` is used in a client component, or static pages are not generated.\nFix in order:\n1. Move `getAllTools()` to a Server Component and pass the `tools` array as a prop to\n   `CategoryFilter` and `SearchBar`.\n2. Add `export async function generateStaticParams()` to `src/app/tools/[slug]/page.tsx`.\n3. Confirm `gray-matter` is installed: `bun add gray-matter`.\nShow only the corrected diff.\n```"
}