Das ultimative Next.js Admin Dashboard mit shadcn/ui bauen

Unsere Architektur steht. Die Laravel-Datenbank ist relational perfektioniert, die REST-API feuert gefilterte JSON-Pakete in Millisekunden ab und unser Sanctum-Sicherheitstresor schützt die Verbindungen mit unsichtbaren HttpOnly-Cookies. Dein Backend ist eine Maschine.

Doch die beste Maschine der Welt nützt nichts, wenn das Cockpit für den Piloten aussieht wie ein Relikt aus den 90er Jahren. Es ist an der Zeit, dass unser Headless CMS endlich ein Gesicht bekommt. Wir verlassen den dunklen Maschinenraum und bauen ein hochmodernes Next.js Admin Dashboard shadcn-basiert auf.

Früher haben wir für so etwas gigantische CSS-Frameworks wie Bootstrap oder Material UI installiert. Der Preis dafür war hoch: Alle Webseiten sahen irgendwann exakt gleich aus, das Überschreiben der Standard-Designs glich einem Kampf gegen Windmühlen und ungenutzter CSS-Code blähte die Ladezeiten massiv auf.

Heute machen wir das auf Enterprise-Niveau. Wir nutzen Tailwind CSS für das absolute Styling-Monopol und kombinieren es mit der aktuell brillantesten Lösung der React-Welt: shadcn/ui.

1. Die Revolution: Warum shadcn/ui alles verändert

Bevor wir Code generieren, müssen wir das Konzept hinter shadcn/ui verstehen, denn es bricht mit allen bisherigen Regeln. shadcn/ui ist keine Bibliothek, die du über npm als Abhängigkeit (Dependency) installierst. Du installierst hier kein Paket, das tief in deinem node_modules-Ordner vergraben liegt und bei dem du beten musst, dass der Entwickler ein Bugfix-Update herausbringt. Stattdessen ist shadcn/ui eine Sammlung von extrem gut durchdachten, zugänglichen (accessible) React-Komponenten, deren Quellcode direkt in dein eigenes Projekt kopiert wird.

Du hast die volle Kontrolle über jeden einzelnen Button, jedes Modal und jede Tabelle. Gefällt dir das Padding eines Buttons nicht? Öffne die Datei in deinem Projekt und ändere es. Du bist der Besitzer des Codes. Gepaart mit Radix UI (für unbesungene Accessibility-Features wie Tastaturnavigation) ist das der ultimative Baukasten für ein professionelles Next.js Admin Dashboard shadcn Setup.

2. Das Fundament gießen: shadcn/ui im Projekt initialisieren

Öffne dein Terminal und navigiere in dein bestehendes Frontend-Projekt (cms-frontend), das wir in den vorherigen Teilen bereits angelegt haben. Da wir bei der Next.js-Installation Tailwind CSS bereits aktiviert haben, können wir direkt loslegen.

Führe diesen Initialisierungs-Befehl aus:

npx shadcn-ui@latest init

Der Assistent im Terminal wird dir nun einige wichtige Fragen stellen, um dein Projekt perfekt zu konfigurieren. Antworte genau so:

• Which style would you like to use? New York (Wirkt kompakter und technischer, perfekt für Dashboards)

• Which color would you like to use as base color? Zinc (Ergibt ein wunderschönes, dunkles, neutrales Grau)

• Do you want to use CSS variables for colors? yes (Zwingend notwendig für einen sauberen Dark-Mode-Switch)

Der Assistent erstellt nun automatisch eine components.json Datei und konfiguriert deine tailwind.config.ts so, dass sie die magischen CSS-Variablen von shadcn versteht. Wenn du jetzt in deinen Ordner src/ schaust, wirst du sehen, dass shadcn zwei neue Ordner angelegt hat: /components/ui (hier landen unsere Lego-Steine) und /lib/utils.ts (eine kleine Helfer-Datei zum Mischen von Tailwind-Klassen).

Die ersten Komponenten einfliegen

Um unser Next.js Admin Dashboard shadcn Layout zu bauen, brauchen wir ein paar grundlegende Bausteine. Wir holen uns direkt einen Button, ein Karten-Layout (Card), Eingabefelder (Input) und Labels.

Führe diese Befehle nacheinander (oder kombiniert) in deinem Frontend-Terminal aus:

npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add input
npx shadcn-ui@latest add label

Bäm! Schau in deinen Ordner src/components/ui. Dort liegen jetzt fertige, wunderschöne React-Dateien (button.tsx, card.tsx, etc.). Sie gehören dir. Du kannst sie nach Belieben anpassen, aber für 99 % der Anwendungsfälle sind sie out-of-the-box bereits perfekt.

3. Das Grundgerüst: Ein responsives Layout mit Sidebar und Header

Wir haben unsere ersten UI-Komponenten erfolgreich in unser Projekt importiert. Jetzt bauen wir daraus das Grundgerüst für unser Next.js Admin Dashboard shadcn Setup. Ein gutes Redaktionssystem benötigt immer ein konsistentes, unverwüstliches Layout: Eine feste Navigationsleiste (Sidebar) auf der linken Seite und eine Kopfzeile (Header) für Meta-Aktionen (wie den Logout oder Profil-Einstellungen), die auf jeder einzelnen Unterseite exakt an ihrem Platz bleiben.

Dank des Next.js App Routers ist das ein architektonisches Kinderspiel. Wir nutzen dafür eine spezielle layout.tsx Datei. Alles, was in dieser Datei an UI-Elementen definiert wird, umschließt völlig automatisch alle Unterseiten (Pages), die im gleichen Ordner oder darunter liegen. Ein Neuladen der Seite (Full Page Reload) findet bei der Navigation innerhalb dieses Layouts nicht mehr statt.

Erstelle einen neuen Ordner src/app/admin (falls in Teil 4 noch nicht geschehen) und lege darin die Datei layout.tsx an. Füge folgenden Code ein, um unser Premium-Layout zu konstruieren:

1import Link from 'next/link';
2import { Button } from '@/components/ui/button';
3
4export default function AdminLayout({
5  children,
6}: {
7  children: React.ReactNode;
8}) {
9  return (
10    <div className="min-h-screen bg-zinc-950 text-zinc-100 flex">
11      
12      {/* Die linke Navigation (Sidebar) */}
13      <aside className="w-64 border-r border-zinc-800 bg-zinc-950 hidden md:flex flex-col">
14        <div className="h-16 flex items-center px-6 border-b border-zinc-800">
15          <span className="text-xl font-bold text-emerald-500">Headless CMS</span>
16        </div>
17        
18        <nav className="flex-1 p-4 space-y-2">
19          <Link href="/admin/dashboard" className="block px-4 py-2 rounded-md bg-zinc-900 text-zinc-100 text-sm font-medium transition-colors">
20            Dashboard
21          </Link>
22          <Link href="/admin/posts" className="block px-4 py-2 rounded-md hover:bg-zinc-900 text-zinc-400 hover:text-zinc-100 text-sm font-medium transition-colors">
23            Artikel verwalten
24          </Link>
25          <Link href="/admin/categories" className="block px-4 py-2 rounded-md hover:bg-zinc-900 text-zinc-400 hover:text-zinc-100 text-sm font-medium transition-colors">
26            Kategorien
27          </Link>
28        </nav>
29
30        <div className="p-4 border-t border-zinc-800">
31          <span className="text-xs text-zinc-500 uppercase tracking-wider font-semibold">System Status: Online</span>
32        </div>
33      </aside>
34
35      {/* Der rechte Hauptbereich */}
36      <main className="flex-1 flex flex-col min-h-screen overflow-hidden">
37        
38        {/* Der obere Header */}
39        <header className="h-16 border-b border-zinc-800 bg-zinc-950/50 backdrop-blur-sm flex items-center justify-between px-8 sticky top-0 z-10">
40          <h2 className="text-sm font-medium text-zinc-400">Übersicht</h2>
41          
42          <div className="flex items-center gap-4">
43            {/* Hier nutzen wir direkt unsere neue shadcn/ui Button Komponente! */}
44            <Button variant="outline" size="sm" className="border-zinc-800 bg-transparent text-zinc-300 hover:bg-zinc-900 hover:text-zinc-100">
45              Live-Website ansehen
46            </Button>
47            <Button variant="destructive" size="sm">
48              Sicher Logout
49            </Button>
50          </div>
51        </header>
52
53        {/* Der dynamische Content (Hier wird die jeweilige page.tsx geladen) */}
54        <div className="flex-1 overflow-auto p-8">
55          {children}
56        </div>
57
58      </main>
59    </div>
60  );
61}

Was passiert hier im Detail? Wir nutzen die brillanten Utility-Klassen von Tailwind CSS (flex, w-64, border-r, backdrop-blur-sm), um in wenigen Minuten ein responsives, perfekt ausbalanciertes Layout zu bauen, für das man früher hunderte Zeilen in einer separaten, fehleranfälligen CSS-Datei schreiben musste.

Fällt dir der <Button>-Tag im Header auf? Das ist keine langweilige Standard-HTML-Komponente mehr. Das ist der smarte Button, den wir im vorherigen Schritt über die CLI importiert haben (import { Button } from '@/components/ui/button';). Durch die einfache Übergabe des Attributs variant="outline" oder variant="destructive" ändert der Button völlig automatisch sein Aussehen, basierend auf den makellosen Design-Vorgaben von shadcn/ui.

Dein Next.js Admin Dashboard shadcn fängt an, eine professionelle Form anzunehmen.

Speichere die Datei und rufe im Browser http://localhost:3000/admin/dashboard auf (stelle sicher, dass du aus Teil 4 über Sanctum noch eingeloggt bist). Du blickst nun nicht mehr auf eine weiße, leere Seite, sondern direkt in die abgedunkelte, moderne Kommandozentrale deines zukünftigen CMS.

4. Die Kommandozentrale: Eine interaktive Datentabelle bauen

Ein responsives Layout ist ein toller Anfang, aber ein CMS lebt von seinen Daten. Wir brauchen eine Übersicht aller geschriebenen Artikel. Wer jemals versucht hat, eine nackte HTML-<table> von Hand so zu stylen, dass sie auf dem Smartphone nicht komplett auseinanderbricht, kennt den Schmerz.

Wir machen das auf die smarte Tour. shadcn/ui bietet uns eine atemberaubende Tabellen-Komponente an, die wir nahtlos in unser Next.js Admin Dashboard shadcn Setup integrieren können. Bevor wir den Code schreiben, holen wir uns die benötigten Bausteine in unser Projekt.

Führe diese Befehle in deinem Frontend-Terminal aus, um die Tabelle und kleine Status-Badges herunterzuladen:

npx shadcn-ui@latest add table
npx shadcn-ui@latest add badge

Die Artikel-Übersicht (Server Component)

Erinnere dich an Teil 4 unserer Serie: Wir haben dort den grandiosen serverFetch-Helfer gebaut, der die sicheren HttpOnly-Cookies des Nutzers fängt und an unsere Laravel-API weiterleitet. Genau diesen Helfer nutzen wir jetzt, um unsere Tabelle bereits auf dem Server (Server-Side Rendering) mit Leben zu füllen, bevor der Browser des Nutzers auch nur ein einziges Pixel rendert.

Erstelle eine neue Datei unter src/app/admin/posts/page.tsx und füge diesen Code ein:

1import { serverFetch } from '@/lib/server-fetch';
2import { redirect } from 'next/navigation';
3import { Button } from '@/components/ui/button';
4import { Badge } from '@/components/ui/badge';
5import {
6  Table,
7  TableBody,
8  TableCell,
9  TableHead,
10  TableHeader,
11  TableRow,
12} from '@/components/ui/table';
13
14export default async function AdminPostsPage() {
15  // 1. Daten sicher vom Laravel Backend fetchen (inklusive Cookies!)
16  const response = await serverFetch('/api/posts');
17
18  // Wenn der Nutzer nicht eingeloggt ist -> zurück zum Login
19  if (!response.ok) {
20    redirect('/login');
21  }
22
23  const { data: posts } = await response.json();
24
25  return (
26    <div className="space-y-6">
27      
28      {/* Header-Bereich der Unterseite */}
29      <div className="flex justify-between items-center">
30        <div>
31          <h1 className="text-2xl font-bold text-zinc-100">Artikel verwalten</h1>
32          <p className="text-zinc-400 text-sm mt-1">Hier siehst du alle Beiträge deines CMS.</p>
33        </div>
34        <Button className="bg-emerald-600 hover:bg-emerald-700 text-white">
35          + Neuen Artikel erstellen
36        </Button>
37      </div>
38
39      {/* Die shadcn/ui Datentabelle */}
40      <div className="rounded-md border border-zinc-800 bg-zinc-950">
41        <Table>
42          <TableHeader>
43            <TableRow className="border-zinc-800 hover:bg-transparent">
44              <TableHead className="text-zinc-400 font-semibold">Titel</TableHead>
45              <TableHead className="text-zinc-400 font-semibold">Autor</TableHead>
46              <TableHead className="text-zinc-400 font-semibold">Status</TableHead>
47              <TableHead className="text-zinc-400 font-semibold text-right">Aktionen</TableHead>
48            </TableRow>
49          </TableHeader>
50          <TableBody>
51            {posts.map((post: any) => (
52              <TableRow key={post.id} className="border-zinc-800 hover:bg-zinc-900/50 transition-colors">
53                <TableCell className="font-medium text-zinc-200">
54                  {post.title}
55                </TableCell>
56                <TableCell className="text-zinc-400">
57                  {post.author?.name || 'Unbekannt'}
58                </TableCell>
59                <TableCell>
60                  {post.is_published ? (
61                    <Badge variant="default" className="bg-emerald-500/10 text-emerald-400 border-emerald-500/20">
62                      Online
63                    </Badge>
64                  ) : (
65                    <Badge variant="secondary" className="bg-zinc-800 text-zinc-400">
66                      Entwurf
67                    </Badge>
68                  )}
69                </TableCell>
70                <TableCell className="text-right">
71                  <Button variant="ghost" size="sm" className="text-zinc-400 hover:text-white">
72                    Bearbeiten
73                  </Button>
74                </TableCell>
75              </TableRow>
76            ))}
77          </TableBody>
78        </Table>
79      </div>
80
81    </div>
82  );
83}

Speichere die Datei und klicke in deiner neuen Sidebar auf "Artikel verwalten" (oder rufe /admin/posts auf).

Was du jetzt siehst, ist Next.js in absoluter Perfektion. Keine Lade-Spinner (Loading States) auf dem Client. Die Seite ist sofort da, voll gerendert, mitsamt einer perfekten, responsiven Tabelle im Dark-Mode. Die Badge-Komponenten von shadcn/ui nutzen wir, um mit winzigen Tailwind-Anpassungen (bg-emerald-500/10) ein wunderschönes, leuchtendes Status-Etikett zu erzeugen.

Das Beste daran? Da wir in Teil 3 unsere API-Resources optimiert haben, liefert Laravel uns bereits die sauberen Relationen (post.author.name). Unser Frontend muss die Daten nur noch elegant konsumieren.

5. Redaktions-Power: Ein interaktives Formular mit React Hook Form

Unsere Tabelle aus dem letzten Schritt wird auf dem Server gerendert und ist pfeilschnell. Aber unser Next.js Admin Dashboard shadcn Setup wäre nicht komplett ohne die Möglichkeit, tatsächlich neue Daten in unser Laravel-Backend zu pumpen. Für interaktive Formulare, die Tasteneingaben des Nutzers verarbeiten und live validieren sollen, müssen wir den Server verlassen und eine React Client Component bauen.

Früher bedeutete das: Dutzende von State-Variablen (useState) anlegen und unübersichtliche onChange-Handler für jedes einzelne Eingabefeld schreiben. Heute lösen wir das auf Enterprise-Niveau. shadcn/ui bringt von Haus aus eine geniale Integration für React Hook Form (für das Formular-Management) und Zod (für die strikte Schema-Validierung) mit.

Lass uns die benötigten Formular-Bausteine in unser Projekt laden. Führe diese Befehle in deinem Frontend-Terminal aus:

npx shadcn-ui@latest add form
npx shadcn-ui@latest add input
npx shadcn-ui@latest add textarea

(Hinweis: Der Befehl add form installiert automatisch die benötigten NPM-Pakete wie react-hook-form und zod im Hintergrund mit!)

Die "Artikel erstellen" Seite bauen

Erstelle nun einen neuen Ordner create innerhalb von /admin/posts und lege dort eine page.tsx an (src/app/admin/posts/create/page.tsx).

Hier ist der Code für unser intelligentes, clientseitiges Formular, das die Daten über unsere sichere Sanctum-Axios-Instanz (aus Teil 4) an Laravel sendet:

1'use client'; // Wichtig: Dies ist eine Client Component!
2
3import { useState } from 'react';
4import { useRouter } from 'next/navigation';
5import { useForm } from 'react-hook-form';
6import { zodResolver } from '@hookform/resolvers/zod';
7import * as z from 'zod';
8import axios from '@/lib/axios';
9
10import { Button } from '@/components/ui/button';
11import { Input } from '@/components/ui/input';
12import { Textarea } from '@/components/ui/textarea';
13import {
14  Form,
15  FormControl,
16  FormField,
17  FormItem,
18  FormLabel,
19  FormMessage,
20} from '@/components/ui/form';
21
22// 1. Wir definieren unser striktes Daten-Schema mit Zod
23const formSchema = z.object({
24  title: z.string().min(5, 'Der Titel muss mindestens 5 Zeichen lang sein.'),
25  slug: z.string().min(5, 'Der Slug ist zu kurz.').regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/, 'Nur Kleinbuchstaben und Bindestriche erlaubt.'),
26  content: z.string().min(20, 'Der Inhalt muss mindestens 20 Zeichen lang sein.'),
27});
28
29export default function CreatePostPage() {
30  const router = useRouter();
31  const [isSubmitting, setIsSubmitting] = useState(false);
32
33  // 2. Formular initialisieren
34  const form = useForm<z.infer<typeof formSchema>>({
35    resolver: zodResolver(formSchema),
36    defaultValues: {
37      title: '',
38      slug: '',
39      content: '',
40    },
41  });
42
43  // 3. Submit-Handler, der mit unserer Laravel API spricht
44  async function onSubmit(values: z.infer<typeof formSchema>) {
45    setIsSubmitting(true);
46    try {
47      // Axios nutzt hier automatisch unsere Sanctum HttpOnly-Cookies!
48      await axios.post('/api/posts', {
49        ...values,
50        is_published: false, // Standardmäßig als Entwurf speichern
51      });
52      
53      // Nach Erfolg: Zurück zur Tabelle und Next.js Cache leeren
54      router.push('/admin/posts');
55      router.refresh(); 
56      
57    } catch (error: any) {
58      console.error('Fehler beim Speichern:', error);
59      // Hier könnten wir später Toast-Notifications einbauen
60    } finally {
61      setIsSubmitting(false);
62    }
63  }
64
65  return (
66    <div className="max-w-3xl mx-auto py-8">
67      <h1 className="text-2xl font-bold text-zinc-100 mb-8">Neuen Artikel verfassen</h1>
68
69      <div className="bg-zinc-950 border border-zinc-800 p-8 rounded-xl">
70        <Form {...form}>
71          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
72            
73            <FormField
74              control={form.control}
75              name="title"
76              render={({ field }) => (
77                <FormItem>
78                  <FormLabel className="text-zinc-300">Titel</FormLabel>
79                  <FormControl>
80                    <Input placeholder="Ein grandioser Titel..." className="bg-zinc-900 border-zinc-800 text-white" {...field} />
81                  </FormControl>
82                  <FormMessage className="text-red-400" />
83                </FormItem>
84              )}
85            />
86
87            <FormField
88              control={form.control}
89              name="slug"
90              render={({ field }) => (
91                <FormItem>
92                  <FormLabel className="text-zinc-300">URL Slug</FormLabel>
93                  <FormControl>
94                    <Input placeholder="ein-grandioser-titel" className="bg-zinc-900 border-zinc-800 text-white" {...field} />
95                  </FormControl>
96                  <FormMessage className="text-red-400" />
97                </FormItem>
98              )}
99            />
100
101            <FormField
102              control={form.control}
103              name="content"
104              render={({ field }) => (
105                <FormItem>
106                  <FormLabel className="text-zinc-300">Inhalt</FormLabel>
107                  <FormControl>
108                    <Textarea 
109                      placeholder="Schreibe deinen Content hier..." 
110                      className="min-h-[200px] bg-zinc-900 border-zinc-800 text-white" 
111                      {...field} 
112                    />
113                  </FormControl>
114                  <FormMessage className="text-red-400" />
115                </FormItem>
116              )}
117            />
118
119            <Button type="submit" disabled={isSubmitting} className="w-full bg-emerald-600 hover:bg-emerald-700 text-white">
120              {isSubmitting ? 'Wird gespeichert...' : 'Artikel als Entwurf speichern'}
121            </Button>
122
123          </form>
124        </Form>
125      </div>
126    </div>
127  );
128}

Wenn du nun im Dashboard in deiner Artikel-Tabelle auf "+ Neuen Artikel erstellen" klickst und dieses Formular absendest, passiert folgendes: Das React Hook Form fängt das Event ab. Zod prüft in Millisekunden, ob deine Eingaben den Regeln entsprechen (z. B. mindestens 5 Zeichen). Erst wenn alles grün ist, feuert Axios den Request an unsere Laravel REST API ab. Laravel empfängt den Request, sieht das unsichtbare Sanctum-Cookie, erkennt dich als legitimen Redakteur, speichert den Artikel in der Datenbank und antwortet mit einem Erfolg. Das Frontend leitet dich nahtlos zurück zur Datentabelle.

Das ist Frontend-Engineering der absoluten Spitzenklasse. Keine Page-Reloads, sofortiges Feedback und kugelsichere Validierung auf Client- UND Serverseite.

Zusammenfassung: Ein Cockpit für Enterprise-Ansprüche

Wir haben dem unsichtbaren Datenmotor unseres Headless CMS endlich ein würdiges Gesicht verliehen. Mit dem Aufbau dieses Next.js Admin Dashboard shadcn Setups hast du die starren Ketten traditioneller, aufgeblähter CSS-Frameworks wie Bootstrap oder Material UI endgültig hinter dir gelassen.

Du hast gelernt, wie man mit Tailwind CSS in Rekordzeit responsive, wunderschöne Layouts (Sidebar und Header) über die Next.js layout.tsx Datei generiert. Wir haben die Kraft von Server Components genutzt, um eine pfeilschnelle, holografisch anmutende Datentabelle zu rendern, die ohne jegliche Ladezeiten direkt vom Server kommt. Und als absolutes Meisterstück haben wir eine Client Component gebaut, die mithilfe von React Hook Form und Zod eine strikte, clientseitige Validierung durchführt, bevor sie die neuen Artikel sicher über unsere Sanctum-Verbindung an das Laravel-Backend übermittelt.

Dein System sieht jetzt nicht nur aus wie eine Millionen-Dollar-App, es funktioniert auch so.