Prompt zum Erstellen eines Admin-Dashboards in Next.js

AI-Agent-Prompt zum Erstellen eines geschützten Next.js Admin-Dashboards mit Datentabellen, serverseitigen Auth-Guards und einem Sidebar-Layout mit Tailwind.

Geben Sie diesen Prompt Ihrem Agenten, um einen rollenbasierten Admin-Bereich mit einer persistenten Sidebar, sortierbaren Datentabellen und serverseitigen Auth-Checks zu erstellen – ohne ein vollständiges neues Next.js-Projekt zu erstellen oder ein aufgeblähtes Admin-Framework zu installieren.

Haupt-Prompt

You are working in an existing Next.js App Router project with TypeScript, Tailwind CSS v4,
and PostgreSQL. Auth is already set up (assume a `getSession()` helper exists in `src/lib/get-session.ts`
that returns `{ user: { id, email, role } } | null`).

Task: add an admin dashboard at the `/admin` route group.

Requirements:
- Create a `src/app/(admin)/layout.tsx` that:
  - Calls `getSession()` and redirects to `/login` if the session is null or `role !== 'admin'`.
  - Renders a persistent sidebar with links: Dashboard, Users, Settings.
  - Uses Tailwind for layout — a fixed-width sidebar and a scrollable main area.
- Create `src/app/(admin)/dashboard/page.tsx` with:
  - Four KPI cards: Total Users, Active Today, Revenue (MRR), Churn Rate — all fetched from
    PostgreSQL using parameterized queries via `postgres` npm package.
  - A `<UsersTable>` server component that renders the 50 most recent users (id, email, role,
    created_at) with sortable column headers (URL-based sort param).
- Create `src/components/admin/KpiCard.tsx` and `src/components/admin/UsersTable.tsx`.
- All DB queries must use parameterized placeholders — never string interpolation.
- Do not install Prisma, Drizzle, or any ORM. Use the `postgres` package directly.
- Do not use any pre-built admin UI library (Refine, AdminJS, etc.).

Stop and list all planned file changes before writing any code.

Implementierungshinweise

Die Klammern der Routengruppe (admin) halten /admin/dashboard aus der URL heraus, während das Layout gemeinsam genutzt wird – der Agent vergisst manchmal die Klammern und erstellt ein literales /admin-Segment.
Sortierbare Spalten sollten URL-Parameter ?sort=email&dir=asc verwenden, die in der Server-Komponente über die searchParams-Prop gelesen werden – kein Client-Status erforderlich.
KPI-Abfragen sollten parallel mit Promise.all ausgeführt werden, um DB-Roundtrips zu minimieren.

Erwartete Dateiänderungen

src/app/(admin)/layout.tsx                  (new)
src/app/(admin)/dashboard/page.tsx          (new)
src/components/admin/KpiCard.tsx            (new)
src/components/admin/UsersTable.tsx         (new)
src/lib/queries/admin-stats.ts             (new)

Akzeptanzkriterien

Der Besuch von /dashboard als Nicht-Admin-Benutzer leitet zu /login weiter.
KPI-Karten zeigen echte Werte aus PostgreSQL.
Die Benutzertabelle wird serverseitig nach den URL-Parametern sort + dir sortiert.
bun run build beendet mit Exit-Code 0 und ohne Typfehler.

Testbefehle

bun run typecheck
bun run build
bun run dev
# log in as admin and visit /dashboard
# visit /dashboard without auth — confirm redirect to /login
# add ?sort=email&dir=asc to the URL and confirm table order

Häufige KI-Fehler

Erstellen von src/app/admin/layout.tsx anstelle von src/app/(admin)/layout.tsx.
Durchführen der Auth-Überprüfung clientseitig, was umgangen werden kann.
Verwendung von String-Interpolation in SQL-Abfragen: `SELECT * FROM users WHERE role = '${role}'`.
Abrufen von KPI-Statistiken sequenziell anstatt mit Promise.all.

Korrektur-Prompt

The admin layout does not redirect unauthenticated users, or the route group folder name is wrong.
Fix in order:
1. Rename `src/app/admin/` to `src/app/(admin)/` — the parentheses are required for a route group.
2. In `layout.tsx`, add the auth check at the very top using `getSession()` and `redirect('/login')`.
3. Audit all SQL query strings and replace any interpolated variables with `$1`, `$2` placeholders.
Show the corrected diff only.