Prompt pour construire un répertoire d'outils IA avec Next.js

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.

Donnez ce prompt à votre agent pour construire un répertoire d’outils IA généré statiquement et optimisé pour le SEO, avec filtrage par catégorie, recherche côté client et une page de détail par outil — sans avoir recours à une base de données alors que de simples fichiers MDX suffisent.

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.

Notes d’implémentation

getAllTools() doit être exécuté uniquement côté serveur ; l’appeler dans un composant client exposera fs au navigateur et fera échouer la build. Passez les données comme props aux composants clients.
generateStaticParams pour [slug] doit appeler getAllTools() et mapper vers des objets { slug }.
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.

Changements de fichiers attendus

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ères d’acceptation

bun run build se termine avec le code 0 et génère une page statique pour chaque slug d’outil.
Cliquer sur un filtre de catégorie met à jour l’URL et filtre la grille sans rechargement complet.
Chaque page de détail d’outil a des balises og:title et og:description uniques dans le <head> HTML.
La recherche de “cursor” affiche uniquement la carte de Cursor.

Commandes de test

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

Erreurs fréquentes des IA

Appeler getAllTools() à l’intérieur d’un composant client, ce qui casse la build avec une erreur du module fs.
Oublier generateStaticParams sur la page [slug], causant des erreurs 404 dans l’export statique.
Utiliser next-mdx-remote alors que le prompt l’interdit explicitement.
Coder en dur la liste des catégories au lieu de la déduire des données d’outils.

Prompt de correction

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.