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.

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

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.

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

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 <head> de HTML.
Buscar “cursor” muestra solo la tarjeta de Cursor.

Comandos de Prueba

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

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.