Nextjs Portfolio Template, das dir Kunden bringt

Wer nach einem Nextjs Portfolio Template oder einer Nextjs Portfolio Vorlage sucht, will meistens eine Website, die Arbeit bringt: einen Kunden, einen Vertrag, ein Vorstellungsgespräch. Was man dann findet, ist ein hübscher Hero, ein Raster mit jedem Nebenprojekt samt GitHub-Sternen und ganz unten ein mailto-Link. Das ist ein Lebenslauf mit Animationen, mehr nicht. Dieser Guide zeigt, was eine Portfolio-Seite braucht, damit aus einem Besucher eine Nachricht wird, wie die Vorlage Portfolio Page von Wingo UI genau darauf aufgebaut ist, was du als Entwickler statt als Designer streichen solltest und wie das Ganze auf dem Smartphone wirkt.

Was fehlt den beliebten Next.js Portfolio Templates?

Sie decken vor allem den Stack ab und lassen das Verkaufen weg. Die GitHub-Topic-Seite nextjs-portfolio-template (opens in a new tab) listete bei unserer Prüfung am 6. November 2026 25 öffentliche Repositories. Die Einträge mit den meisten Sternen beschreiben sich über ihren Stack (Next.js 16, Tailwind CSS, Framer Motion, Three.js) oder als persönliche Website, die andere wiederverwenden dürfen, nicht über die Abschnitte, die sie mitbringen. Vercels Galerie für Portfolio-Vorlagen (opens in a new tab) (am selben Tag geprüft) führt Next.js-Starter wie das Portfolio Starter Kit, Magic Portfolio for Next.js und ein Portfolio mit Seitenaufrufzähler. Ihre Kurzbeschreibungen nennen Markdown, einen Blog, Projekte und eine Galerie; keine erwähnt Case Studies, Preise oder ein Kontaktformular.

Diese Starter halten, was sie versprechen. Willst du bis heute Abend eine kostenlose persönliche Website mit Markdown-Blog, würden wir das Portfolio Starter Kit nehmen. Die Lücken zeigen sich, sobald die Website eine Aufgabe hat:

• Case Studies statt Thumbnails. Eine Karte mit Titel und drei Tags sagt einem Kunden nichts. Das Problem, deine Rolle, dein Vorgehen und ein Ergebnis schon.
• Ein Preisanker. „Ab $6,500“ filtert unpassende Anfragen heraus und gibt einem ernsthaften Kunden einen Grund zu schreiben.
• Ein Kontaktformular mit Validierung und Fehlerzustand. Ein mailto-Link bringt Besuchern ohne eingerichtete Mail-App nichts, und du erfährst nie, dass sie es versucht haben.
• Ein Smartphone-Layout, bei dem Besucher ihre Position auf der Seite behalten. Eine eigene Route pro Case Study heißt: ein kompletter Seitenwechsel, und wer zwei Projekte vergleicht, muss jedes Mal zurück zum Raster.

Welche Abschnitte braucht ein Portfolio, das Kunden gewinnt?

Sechs, in dieser Reihenfolge: Hero, ausgewählte Arbeiten, Erfahrung, Leistungen, Testimonials und Beiträge sowie Kontakt. Die Portfolio Page ist ein Tailwind Portfolio Template, das standardmäßig alle sechs rendert. Daten-Props füllen sie, und show*-Props schalten die optionalen ab:

Der Erfahrungsabschnitt ist unsere Timeline Section mit Punktmarkern und Jahreszahlen, die auf dem Desktop beim Scrollen neben jeder Karte stehen bleiben, und die Zitate kommen aus der Testimonials Section. Beide nehmen Overrides über experienceProps und testimonialsProps an, eine horizontale Timeline oder ein Karussell mit Zitaten ist also nur eine Prop entfernt.

Warum Case Studies in einem Sheet statt auf einer neuen Seite öffnen?

Weil Besucher deine Projekte vergleichen, und mit einem Sheet geht das, ohne dass sie das Raster verlieren. Jede Karte ist ein einziger Button. Sie öffnet die Komponente Sheet von rechts in der Größe xl, mit Kunde, Jahr, Rolle und Zeitrahmen, dem Problem, dem Vorgehen in nummerierten Schritten, Ergebniszahlen und einem Bildstreifen zum Wischen. Die Pfeil-Buttons im Footer springen zum vorherigen oder nächsten Projekt, Escape schließt das Sheet, und der Fokus kehrt zur Karte zurück, die es geöffnet hat. „Start a similar project“ schließt das Sheet und setzt den Cursor ins Kontaktformular.

Das Sheet wird über project und onProjectChange gesteuert oder mit defaultProject vorbelegt. So kannst du die offene Case Study in der URL spiegeln und einen Link darauf teilen. Lies den Query-Parameter in der Server-Page aus und schreib Änderungen mit der nativen History API zurück, die Next.js mit seinem Router synchron hält:

// app/portfolio.tsx
"use client";

import { PortfolioPage } from "@/components/templates/portfolio-page";

export function Portfolio({ initialProject }: { initialProject: string }) {
  return (
    <PortfolioPage
      defaultProject={initialProject}
      onProjectChange={(slug) => {
        const url = slug ? `?work=${encodeURIComponent(slug)}` : window.location.pathname;
        window.history.replaceState(null, "", url);
      }}
    />
  );
}

// app/page.tsx
import { Portfolio } from "./portfolio";

export default async function Page({ searchParams }: { searchParams: Promise<{ work?: string }> }) {
  const { work } = await searchParams;
  return <Portfolio initialProject={work ?? ""} />;
}

Weil die Route searchParams liest, wird sie bei jedem Request gerendert, und das ganze Portfolio bleibt im Server-HTML. Würdest du stattdessen im Client useSearchParams aufrufen, würde auf einer vorgerenderten Route alles bis zur nächsten Suspense-Grenze im Client gerendert, und das ist hier die ganze Seite. Soll jede Case Study einzeln indexiert werden, behalte für Suchmaschinen zusätzlich eine echte Seite /work/<slug>; das Sheet ist für Menschen, die schon auf der Seite sind.

Was sollte ein Entwickler anders als ein Designer streichen?

Weniger Bilder, mehr Belege, dass das Ding läuft. Die Beispieldaten gehören einer Produktdesignerin, Emma Carter in New York. Um daraus ein Developer Portfolio Template zu machen, tauschst du die Inhalte und behältst das Layout:

Zwei Regeln gelten für alle. Füll den Testimonials-Abschnitt nicht mit Platzhalterzitaten, denn wer ein falsches Zitat entdeckt, glaubt auch den echten nicht mehr; setz showTestimonials={false}, bis du zwei oder drei hast. Und ein leeres facts-Array blendet die Kennzahlen im Hero aus. Das ist besser als „5+ Jahre“ ohne irgendeinen Beleg.

Wie richte ich es als Freelance-Entwickler ein?

Installier die Vorlage. Sie funktioniert wie jedes shadcn Portfolio Template: Die CLI kopiert den Quellcode in dein Projekt, und die Dateien gehören dir. Mit dabei sind das Sheet, die Timeline, die Abschnitte für Testimonials und Blog, die Formularfelder und die gemeinsamen Hooks:

npx wingo-ui@latest add portfolio-page

Dann ersetzt du die Beispielinhalte. Die Typen liegen in der Datendatei neben der Vorlage:

// app/page.tsx
"use client";

import Link from "next/link";
import { PortfolioPage } from "@/components/templates/portfolio-page";
import type {
  PortfolioExperience,
  PortfolioProject,
  PortfolioService,
} from "@/components/templates/portfolio-page-data";
import { sendMessage } from "./actions";

// ersetz Kunde, Texte und Zahlen durch deine eigene, echte Arbeit
const projects: PortfolioProject[] = [
  {
    slug: "globex-checkout",
    title: "Ein Checkout, neu gebaut auf einer Seite",
    client: "Globex",
    summary: "Einen Checkout mit fünf Schritten auf eine Next.js-Seite mit Server Actions und einem gemeinsamen Formular-Kit umgestellt.",
    year: "2026",
    role: "Lead Frontend Engineer",
    duration: "10 Wochen",
    tags: ["Next.js", "Performance", "Formulare"],
    color: "#2563EB",
    cover: "flow",
    problem: "Kunden sind zwischen Versand und Zahlung abgesprungen, und jeder Schritt war ein eigener Seitenaufruf.",
    process: [
      { title: "Den Funnel gemessen", description: "Events in jeden Schritt eingebaut, um zu sehen, wo Leute abspringen." },
      { title: "Die Schritte zusammengelegt", description: "Eine Seite, ein Formular, Validierung auf dem Server und beim Verlassen des Felds." },
      { title: "Hinter einem Flag ausgeliefert", description: "Beide Checkouts zwei Wochen lang parallel betrieben." },
    ],
    outcome: "Der einseitige Checkout hat den alten Ablauf für alle Kunden ersetzt.",
    metrics: [{ value: "1 Seite", label: "statt fünf" }],
    href: "https://example.com",
  },
];

const experience: PortfolioExperience[] = [
  { company: "Selbstständig", role: "Frontend-Entwickler", start: "2023", description: "Next.js-Projekte und Audits für Startups." },
  { company: "Globex", role: "Senior Engineer", start: "2019", end: "2023", location: "Austin", description: "Leitung des Web-Checkout-Teams." },
];

const services: PortfolioService[] = [
  { id: "audit", title: "Performance-Audit", description: "Ein schriftlicher Bericht mit den zehn Fixes, die am meisten bringen.", price: 2500, duration: "1 Woche", features: ["Review der Core Web Vitals", "Bundle-Analyse", "Ein Call, in dem wir ihn durchgehen"] },
  { id: "build", title: "Feature-Entwicklung", description: "Ein Feature von der Spezifikation bis in Produktion.", price: 9000, duration: "4 bis 6 Wochen", features: ["Wöchentliche Demos", "Tests und Doku", "Zwei Wochen Support"], featured: true },
  { id: "partner", title: "Frontend-Partner", description: "Ein paar Tage im Monat an deiner Codebase.", price: 6000, unit: "/ Monat", features: ["Code Review", "Architektur-Calls", "Pairing mit deinem Team"] },
];

export default function Home() {
  return (
    <PortfolioPage
      linkComponent={Link}
      owner={{ name: "Liam Brooks", role: "Frontend-Entwickler", location: "Austin", email: "liam@example.com", socials: [{ label: "GitHub", href: "https://github.com" }] }}
      labels={{
        heroTitle: "Ich baue schnelle, barrierefreie Next.js-Apps.",
        heroDescription: "Frontend-Entwickler in Austin. Ich helfe kleinen Teams, Checkouts, Dashboards und Design-Systeme auszuliefern.",
        experienceTitle: "Sieben Jahre UI in Produktion",
      }}
      facts={[]}
      projects={projects}
      experience={experience}
      services={services}
      layout="list"
      showTestimonials={false}
      showWriting={false}
      onContact={sendMessage}
    />
  );
}

layout="list" gibt jedem Projekt eine breite Karte mit dem Cover neben dem Text. Das passt zu einem Entwickler mit weniger, dafür tieferen Projekten. Weil diese Seite eine Client-Komponente ist, kann export const metadata nicht in ihr stehen: Setz Titel und Beschreibung in app/layout.tsx, oder verschieb das Markup wie im URL-Beispiel oben in eine eigene Client-Datei und lass page.tsx auf dem Server. Die Leistungen werden außerdem zu den Optionen der Gruppe „What do you need?“ im Formular. Wer beim Audit auf „Book this“ tippt, landet also im Formular, und das Audit ist schon ausgewählt.

Wie verbinde ich das Kontaktformular?

Gib onContact eine Funktion, die ein Promise zurückgibt. Solange sie läuft, dreht sich ein Spinner im Button; wird das Promise abgelehnt, bleibt alles erhalten, was die Person eingegeben hat, und über „Send message“ erscheint der Fehler. Ohne onContact wartet die Seite 900 ms und bedankt sich, ohne etwas zu senden. Für eine Demo ist das in Ordnung, in Produktion ist es ein verlorener Lead. Eine Server Action reicht dafür:

// app/actions.ts
"use server";

import type { PortfolioContactValues } from "@/components/templates/portfolio-page";

export async function sendMessage(values: PortfolioContactValues) {
  // das Formular prüft das schon im Client; prüf es auf dem Server noch einmal
  if (!values.email.includes("@") || values.message.trim().length < 20) {
    throw new Error("Invalid message");
  }
  // schick { name, email, projectType, message } hier über deinen Mail-Anbieter
}

Im Client gelten dieselben Prüfungen: ein Name, eine gültige E-Mail und mindestens 20 Zeichen zum Projekt, und der Fokus springt zum ersten Problem. Brauchst du stattdessen eine vollständige Kontaktseite mit Bürozeiten, Kanälen und Karte, ist die Vorlage Contact Page kostenlos.

Wie wirkt das Portfolio auf dem Smartphone?

Die Seite ist Mobile first gebaut. Unter 768px fallen das Raster und das Listen-Layout auf eine Spalte zusammen, und das Sheet mit der Case Study kommt von unten (mobileSide="bottom" am Sheet), mit einem Griff zum Herunterwischen. Die Timeline zieht die Jahreszahlen in die Karten, und der Bildstreifen in einer Case Study scrollt per Wischen seitwärts. Sobald der Hero aus dem Bild scrollt, gleitet von unten eine Leiste mit „Hire me“ herein, per env(safe-area-inset-bottom) mit Abstand über dem Home-Indikator des iPhones. Im Kontaktabschnitt und bei offener Case Study verschwindet sie wieder, sie verdeckt also nie das Formular oder das Sheet. Abschalten kannst du sie mit stickyBar={false}.

Die Seite respektiert auch reduzierte Bewegung: Die Einblendung des Heros, das Gleiten zum Kontaktabschnitt und die Übergänge des Sheets erfolgen sofort, und der Hero animiert nie während der Hydration. Das Server-HTML ist also schon das endgültige Layout.

Gibt es eine kostenlose Version, und was kostet Pro?

Portfolio Page, Timeline Section und Testimonials Section sind Pro-Items; Sheet und Contact Page gehören zu den 75 kostenlosen Items im Katalog mit 369 Items, Stand 6. November 2026. Pro kostet $8 im Monat, $80 im Jahr oder einmalig $150 für lebenslangen Zugang, siehe Preise. Wenn ein kostenloses Nextjs Portfolio Template von GitHub oder Vercel tut, was du brauchst, nimm es. Willst du Case Studies, Preise und Formular fertig gebaut, mit durchgestaltetem Light und Dark Mode, installier die Vorlage und verbring den Abend lieber mit deinen Inhalten.

Weitere komplette Seiten, die genauso gebaut sind, findest du unter Praxis: Screens und Apps, oder du startest mit unserem Guide zum SaaS Website Template. Er behandelt die Marketing-Website, die ein Produkt rund um eine Seite wie diese braucht. Verkauft ein Team die Arbeit statt einer einzelnen Person, deckt unser Guide zum Agentur Website Template diese Variante ab, mit Paketen und Preisen und einem Anfrageformular, das nach dem Budget fragt.

Häufige Fragen

Was gehört in ein Entwickler-Portfolio?

Drei bis fünf Case Studies mit Problem, deiner Rolle, dem Vorgehen und einem Ergebnis, das du belegen kannst, dazu eine kurze Liste deiner Stationen, ein Weg, dich zu buchen, und ein Kontaktformular. Eine Liste aller Repositories, die du je gepusht hast, ist bloß ein aufgeblähter Lebenslauf, und die meisten Besucher lesen sie nicht.

Gibt es ein kostenloses Next.js Portfolio Template?

Ja. Die GitHub-Topic-Seite nextjs-portfolio-template listete am 6. November 2026 25 öffentliche Repositories, und in Vercels Vorlagengalerie gibt es das kostenlose Portfolio Starter Kit. Die Portfolio Page von Wingo UI gehört zu Pro; Sheet und Contact Page sind kostenlos.

Sollte ein Portfolio Preise zeigen?

Für Freelance-Arbeit ja: Startpreise sortieren unpassende Anfragen schon vor dem ersten Call aus, und das Kontaktformular abzuschicken fällt leichter. Suchst du einen Job, blende den Abschnitt Leistungen aus, denn eine Preisliste wirkt auf Hiring Manager wie eine Verkaufsseite.

Wie sollten Case Studies auf dem Smartphone funktionieren?

Öffne sie in einem Bottom Sheet, das sich wegwischen lässt, damit Besucher ihre Position auf der Seite behalten. Die Portfolio Page nutzt auf dem Desktop ein Sheet von rechts und unter 768px ein Bottom Sheet, mit Buttons zum vorherigen und nächsten Projekt.

Ist das ein shadcn Portfolio Template?

Es wird wie bei shadcn installiert: npx wingo-ui@latest add portfolio-page kopiert den Quellcode in deinen Komponentenordner, gebaut auf Radix, Tailwind CSS v4 und motion. Die Dateien gehören dir, du bearbeitest sie selbst, und die CLI kann spätere Updates in deine Änderungen mergen.