Next.js 15 + Tailwind CSS: Dein erstes Portfolio in 60 Minuten

Ein professionelles Portfolio ist die digitale Visitenkarte eines jeden Entwicklers. Mit dem Release von Next.js 15 ist es einfacher und schneller geworden, eine performante Seite aufzusetzen, die nicht nur gut aussieht, sondern auch technisch auf dem neuesten Stand ist.

In dieser Anleitung schauen wir uns an, wie du in unter einer Stunde von der ersten Codezeile bis zum Live-Deployment kommst.

Warum Next.js 15 für dein Portfolio?

Next.js 15 bringt einige spannende Neuerungen mit, die besonders für Portfolios relevant sind. Durch den Einsatz von React 19 und dem verbesserten Caching-Verhalten fühlen sich die Seiten deutlich flüssiger an. Zudem sorgt der neue Compiler (Turbopack) für blitzschnelle Reload-Zeiten während der Entwicklung.

Meiner Meinung nach ist Next.js aktuell die beste Wahl, wenn man ein statisches Portfolio bauen möchte, das später mit dynamischen Inhalten (wie einem Blog) wachsen soll. Wer nur eine einzige, statische HTML-Seite braucht, könnte mit purem HTML/CSS schneller am Ziel sein, aber wer eine solide Basis für die Zukunft will, greift zu Next.js.

Schritt 1: Das Projekt aufsetzen

Bevor es losgeht, stelle sicher, dass du Node.js (mindestens Version 18.17.0) auf deinem Rechner installiert hast. Ohne Node.js kannst du den Paketmanager npm nicht nutzen.

Wir verwenden das offizielle Starter-Tool, um direkt die richtigen Einstellungen zu haben. Öffne dein Terminal und gib folgenden Befehl ein:

npx create-next-app@latest my-portfolio

Wähle bei den Abfragen folgende Optionen:

• TypeScript: Yes (Hilft enorm bei der Fehlervermeidung)
• ESLint: Yes
• Tailwind CSS: Yes
• src/ directory: Yes
• App Router: Yes
• Turbo: Yes

Danach wechselst du in den Ordner und startest den Entwicklungsserver:

cd my-portfolio
npm run dev

Schritt 2: Die Grundstruktur

Lösche den Inhalt der src/app/page.tsx und baue zunächst die reine HTML-Struktur – ohne ein einziges Tailwind-Klasse. Erst wenn die Struktur steht, kommt das Styling dazu.

export default function Home() {
  return (
    <main>
      <section>
        <h1>Hallo, ich bin Dein Name</h1>
        <p>
          Fullstack-Entwickler spezialisiert auf moderne Webanwendungen mit Next.js und React.
        </p>
        <div>
          <a href="#projekte">Projekte ansehen</a>
          <a href="#kontakt">Kontakt</a>
        </div>
      </section>
    </main>
  );
}

Im Browser siehst du jetzt eine ungestylte Seite. Das ist richtig so – alle Inhalte sind vorhanden, die Reihenfolge stimmt. Struktur zuerst, Aussehen danach.

Schritt 3: Styling mit Tailwind CSS

Jetzt kommen die Tailwind-Klassen dazu. Die Struktur bleibt identisch – die grün markierten Zeilen zeigen, was neu hinzukommt:

export default function Home() {  return (    <main className="min-h-screen p-8 max-w-4xl mx-auto">      <section className="py-20">        <h1 className="text-5xl font-extrabold mb-4">          Hallo, ich bin Dein Name        </h1>        <p className="text-xl text-gray-600 mb-8">          Fullstack-Entwickler spezialisiert auf moderne Webanwendungen mit Next.js und React.        </p>        <div className="flex gap-4">          <a href="#projekte" className="bg-blue-600 text-white px-6 py-3 rounded-lg font-medium">            Projekte ansehen          </a>          <a href="#kontakt" className="border border-gray-300 px-6 py-3 rounded-lg font-medium">            Kontakt          </a>        </div>      </section>    </main>  );}

max-w-4xl mx-auto zentriert den Content auf breiten Bildschirmen. flex gap-4 legt die beiden Buttons nebeneinander. Der Rest sind Abstände und Typografie – alles ohne eine einzige eigene CSS-Datei zu öffnen.

Viele Einsteiger packen am Anfang zu viele Klassen in eine Komponente. Sobald du denselben Button-Style an zwei Stellen brauchst, lager ihn in eine eigene Komponente aus – dann liegt der Style nur noch an einer Stelle.

Schritt 4: Deployment auf Vercel

Dein Portfolio im Localhost bringt dir wenig – es muss ins Netz. Der einfachste Weg führt über Vercel:

1. Push deinen Code auf ein GitHub-Repository.
2. Verbinde dein GitHub-Konto mit Vercel.
3. Wähle das Repository aus und klicke auf "Deploy".

Vercel erkennt automatisch, dass es sich um ein Next.js Projekt handelt, und konfiguriert alles für dich. In weniger als zwei Minuten ist deine Seite unter einer öffentlichen URL erreichbar.

Fazit: Schnelligkeit vs. Individualität

Das hier vorgestellte Setup ist extrem schnell. Der Nachteil? Ohne eigene Anpassungen sieht Tailwind-Code oft sehr "nach Standard" aus. Nimm dir die Zeit, die Farben in der tailwind.config.ts anzupassen, um deinem Portfolio eine eigene Note zu geben.

Wenn du mehr über die Grundlagen wissen willst, schau dir meinen TypeScript Crashkurs an oder lerne mehr über React Hooks, um dein Portfolio interaktiver zu gestalten.

Dieser Artikel basiert auf den aktuellen Dokumentationen von Next.js und Vercel. Wir haben die verschiedenen Deployment-Optionen verglichen und Vercel als die einsteigerfreundlichste Lösung für dieses Tutorial identifiziert.