{ "id": "build-a-nextjs-ai-tool-directory", "type": "prompts", "category": "prompts", "locale": "pt", "url": "/pt/prompts/build-a-nextjs-ai-tool-directory", "title": "Prompt para Construir um Diretório de Ferramentas de IA com Next.js", "description": "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.", "tools": [ "Cursor", "Claude Code", "Codex", "Windsurf" ], "stack": [ "Next.js", "TypeScript", "Tailwind" ], "tags": [ "nextjs", "typescript", "tailwind", "seo", "search" ], "difficulty": "medium", "updated": "2026-06-08", "markdown": "Dê este prompt ao seu agente para construir um diretório gerado estaticamente e otimizado para SEO\nde ferramentas de IA com filtragem por categoria, busca no lado do cliente e uma página de detalhes por ferramenta —\nsem recorrer a um banco de dados quando arquivos MDX simples são 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 `` components.\n - A `` client component that filters by category using URL search params\n (`?category=writing`). Use `useSearchParams` — no external state library.\n - A `` 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 Implementação\n\n- `getAllTools()` deve ser executado apenas no lado do servidor; chamá-lo em um Componente Cliente exporá `fs`\n ao navegador e quebrará a build. Passe dados como props para componentes cliente.\n- `generateStaticParams` para `[slug]` deve chamar `getAllTools()` e mapear para objetos `{ slug }`.\n- Para páginas de categoria, derive a lista de categorias dos dados das ferramentas, em vez de codificá-la.\n\n## Alterações de Arquivos Esperadas\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## Critérios de Aceitação\n\n- `bun run build` termina com código 0 e gera uma página estática para cada slug de ferramenta.\n- Clicar em um filtro de categoria atualiza a URL e filtra a grade sem recarregar a página.\n- Cada página de detalhes da ferramenta possui `og:title` e `og:description` únicos no `` HTML.\n- Pesquisar por \"cursor\" mostra apenas o card do Cursor.\n\n## Comandos de Teste\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## Erros Comuns de IA\n\n- Chamar `getAllTools()` dentro de um Componente Cliente, quebrando a build com um erro de módulo `fs`.\n- Esquecer `generateStaticParams` na página `[slug]`, causando erros 404 na exportação estática.\n- Usar `next-mdx-remote` quando o prompt explicitamente o proíbe.\n- Codificar a lista de categorias em vez de derivá-la dos dados das ferramentas.\n\n## Prompt de Correção\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```" }