Prompt para Construir um Diretório de Ferramentas de IA com Next.js

Prompt para agente de IA construir um diretório pesquisável de ferramentas de IA com Next.js, usando arquivos de dados MDX, filtros de categoria e geração estática.

Dê este prompt ao seu agente para construir um diretório gerado estaticamente e otimizado para SEO de ferramentas de IA com filtragem por categoria, busca no lado do cliente e uma página de detalhes por ferramenta — sem recorrer a um banco de dados quando arquivos MDX simples são 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 Implementação

getAllTools() deve ser executado apenas no lado do servidor; chamá-lo em um Componente Cliente exporá fs ao navegador e quebrará a build. Passe dados como props para componentes cliente.
generateStaticParams para [slug] deve chamar getAllTools() e mapear para objetos { slug }.
Para páginas de categoria, derive a lista de categorias dos dados das ferramentas, em vez de codificá-la.

Alterações de Arquivos Esperadas

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)

Critérios de Aceitação

bun run build termina com código 0 e gera uma página estática para cada slug de ferramenta.
Clicar em um filtro de categoria atualiza a URL e filtra a grade sem recarregar a página.
Cada página de detalhes da ferramenta possui og:title e og:description únicos no <head> HTML.
Pesquisar por “cursor” mostra apenas o card do Cursor.

Comandos de Teste

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

Erros Comuns de IA

Chamar getAllTools() dentro de um Componente Cliente, quebrando a build com um erro de módulo fs.
Esquecer generateStaticParams na página [slug], causando erros 404 na exportação estática.
Usar next-mdx-remote quando o prompt explicitamente o proíbe.
Codificar a lista de categorias em vez de derivá-la dos dados das ferramentas.

Prompt de Correção

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.