{ "id": "build-a-nextjs-ai-tool-directory", "type": "prompts", "category": "prompts", "locale": "fr", "url": "/fr/prompts/build-a-nextjs-ai-tool-directory", "title": "Prompt pour construire un répertoire d'outils IA avec Next.js", "description": "Prompt pour agent IA afin de construire un répertoire d'outils IA avec Next.js, fichiers de données MDX, filtres par catégorie et génération statique.", "tools": [ "Cursor", "Claude Code", "Codex", "Windsurf" ], "stack": [ "Next.js", "TypeScript", "Tailwind" ], "tags": [ "nextjs", "typescript", "tailwind", "seo", "search" ], "difficulty": "medium", "updated": "2026-06-08", "markdown": "Donnez ce prompt à votre agent pour construire un répertoire d'outils IA généré statiquement et optimisé pour le SEO,\navec filtrage par catégorie, recherche côté client et une page de détail par outil —\nsans avoir recours à une base de données alors que de simples fichiers MDX suffisent.\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## Notes d'implémentation\n\n- `getAllTools()` doit être exécuté uniquement côté serveur ; l'appeler dans un composant client exposera `fs`\n au navigateur et fera échouer la build. Passez les données comme props aux composants clients.\n- `generateStaticParams` pour `[slug]` doit appeler `getAllTools()` et mapper vers des objets `{ slug }`.\n- Pour les pages de catégorie, dérivez la liste des catégories des données d'outils plutôt que de la coder en dur.\n\n## Changements de fichiers attendus\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ères d'acceptation\n\n- `bun run build` se termine avec le code 0 et génère une page statique pour chaque slug d'outil.\n- Cliquer sur un filtre de catégorie met à jour l'URL et filtre la grille sans rechargement complet.\n- Chaque page de détail d'outil a des balises `og:title` et `og:description` uniques dans le `` HTML.\n- La recherche de \"cursor\" affiche uniquement la carte de Cursor.\n\n## Commandes de test\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## Erreurs fréquentes des IA\n\n- Appeler `getAllTools()` à l'intérieur d'un composant client, ce qui casse la build avec une erreur du module `fs`.\n- Oublier `generateStaticParams` sur la page `[slug]`, causant des erreurs 404 dans l'export statique.\n- Utiliser `next-mdx-remote` alors que le prompt l'interdit explicitement.\n- Coder en dur la liste des catégories au lieu de la déduire des données d'outils.\n\n## Prompt de correction\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```" }