Prompt zum Erstellen eines Next.js KI-Tool-Verzeichnisses

KI-Agenten-Prompt zum Erstellen eines durchsuchbaren Next.js KI-Tool-Verzeichnisses mit MDX-Datendateien, Kategorie-Filtern und statischer Generierung.

Geben Sie diesen Prompt Ihrem Agenten, um ein statisch generiertes, SEO-freundliches Verzeichnis von KI-Tools mit Kategorie-Filterung, clientseitiger Suche und einer Detailseite pro Tool zu erstellen — ohne auf eine Datenbank zurückzugreifen, wenn flache MDX-Dateien ausreichen.

Haupt-Prompt

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.

Implementierungshinweise

getAllTools() darf nur serverseitig ausgeführt werden; ein Aufruf in einer Client-Komponente macht fs im Browser verfügbar und führt zu einem Build-Fehler. Übergeben Sie Daten als Props an Client-Komponenten.
generateStaticParams für [slug] sollte getAllTools() aufrufen und auf { slug }-Objekte abbilden.
Leiten Sie die Kategorieliste für Kategorieseiten aus den Tool-Daten ab, anstatt sie fest zu codieren.

Erwartete Dateiänderungen

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)

Akzeptanzkriterien

bun run build endet mit Exit-Code 0 und generiert eine statische Seite für jeden Tool-Slug.
Ein Klick auf einen Kategorie-Filter aktualisiert die URL und filtert das Raster ohne vollständiges Neuladen.
Jede Tool-Detailseite hat eindeutige og:title und og:description im HTML-<head>.
Die Suche nach “cursor” zeigt nur die Cursor-Karte an.

Testbefehle

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

Häufige KI-Fehler

Aufruf von getAllTools() innerhalb einer Client-Komponente, was den Build mit einem fs-Modul-Fehler unterbricht.
Vergessen von generateStaticParams auf der [slug]-Seite, was zu 404-Fehlern beim statischen Export führt.
Verwendung von next-mdx-remote, obwohl der Prompt es explizit verbietet.
Fest codierte Kategorieliste anstatt Ableitung aus den Tool-Daten.

Korrektur-Prompt

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.