# Agentur Website Template für Next.js: Vom Besuch zur Anfrage > Ein Agentur Website Template für Next.js, das Briefings sammelt: Hero mit Wortwechsel, Leistungen, Case Studies, Ablauf, Team, Pakete und Anfrageformular. - Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI - Veröffentlicht: 6. Nov. 2026 - Kategorie: [Praxis: Screens und Apps](https://wingo-ui.com/de/blog/category/build) - Lesezeit: 8 Min. - Kanonische URL: https://wingo-ui.com/de/blog/nextjs-agency-template - Englische Fassung: https://wingo-ui.com/blog/nextjs-agency-template ## Kurz gesagt Eine Agentur-Website hat genau eine Aufgabe: aus einem Besucher ein Briefing zu machen, das du kalkulieren kannst. Die Agency Page von Wingo UI ist ein Next.js-Template mit wechselndem Wort im Hero, Leistungen, Case Studies mit Projektnotizen, einem Ablauf in vier Schritten, dem Team, Paketen mit Preisen und einem Anfrageformular, das Leistungen, Budget, Starttermin und ein Briefing mit mindestens 30 Zeichen abfragt. Nimm sie, wenn ein Team Projekte verkauft, und die Portfolio Page, wenn eine einzelne Person ihre eigene Arbeit verkauft. Du führst ein Studio oder baust Websites für eines, und du suchst ein Agentur Website Template, das mehr kann, als in einem Dribbble-Shot gut auszusehen. Die Seite muss aus einem Besucher ein Briefing machen: was er braucht, was er ungefähr ausgeben kann und wann es losgehen soll. Die meisten Vorlagen, die als Landingpage für Agenturen verkauft werden, hören bei einem Hero, einem Raster mit Leistungen und einem Kontaktlink auf. Dieser Guide zeigt die Abschnitte, die zu einer ernsthaften Anfrage führen, wie das [Template Agency Page](https://wingo-ui.com/templates/agency-page) von Wingo UI um sie herum gebaut ist, was es von einem Portfolio für Einzelpersonen unterscheidet und wie du das Formular im App Router anbindest. ## Was decken die bestehenden Agentur-Templates ab? Vor allem die Optik, dazu jede Menge Infrastruktur. Das [Template Agency auf nextjstemplates.com](https://nextjstemplates.com/templates/agency) (geprüft am 6. November 2026) basiert auf Next.js 16.0.10, trägt die Version 1.3.1 und wurde zuletzt am 20. Juli 2026 aktualisiert. Es bringt PostgreSQL mit Prisma, NextAuth, Sanity für den Blog und Stripe mit und kostet $59 (ein Projekt), $149 (bis zu vier) oder $399 (unbegrenzt). Das ist eine gute Wahl, wenn CMS, Auth und Zahlungen vom ersten Tag an laufen sollen. Theme-Marktplätze verkaufen noch viele mehr; prüf vor dem Kauf die Next.js-Version und das Datum des letzten Updates. Wenn du ein Agentur Website Template kostenlos willst, schau auf GitHub. Das [Topic agency-website-template](https://github.com/topics/agency-website-template) führte am 6. November 2026 13 öffentliche Repositories, [nextjs-agency-template](https://github.com/topics/nextjs-agency-template) eines. Was bei den meisten zu kurz kommt, ist der Weg vom Besucher zum qualifizierten Lead: - **Case Studies mit Ausgangslage, Vorgehen und Ergebnis**, während die meisten nur ein Vorschaubild und ein Tag zeigen. - **Preise von Anfang an**, damit die Anfrage schon mit einem Budget beginnt. - **Ein Formular, das die Fragen aus dem ersten Telefonat stellt**: Leistungen, Budget, Starttermin, ein echtes Briefing. - **Ein Layout fürs Smartphone**, in dem sich die Case Studies nicht zu einer endlosen Spalte stapeln. ## Welche Abschnitte braucht eine Agentur-Website? Acht, und die Agency Page rendert sie standardmäßig alle. Jeder bekommt seinen Inhalt als Prop, und jeder Abschnitt nach dem Hero lässt sich mit einem `show*`-Schalter ausblenden: | Abschnitt | Was der Kunde erfährt | Prop | |---|---|---| | Hero | Was ihr baut, in einem wechselnden Wort, dazu Verfügbarkeit und Eckdaten | `heroWords`, `labels`, `facts`, `available` | | Kunden | Wer euch schon vertraut | `clients`, `showClients` | | Leistungen | Vier Bereiche mit ihren Ergebnissen als Checkliste | `services`, `showServices` | | Arbeiten | Projektkarten mit gezeichneten Covern und Kennzahlen | `caseStudies`, `showWork` | | Projektnotizen | Die Ausgangslage, was ihr gemacht habt, die Dauer und ein Zitat | `showCaseNotes` | | Ablauf | Vier Schritte vom Kennenlernen bis zum Launch | `process`, `showProcess` | | Team | Erfahrene Leute plus eine Kachel für offene Stellen | `team`, `openRoles`, `showTeam` | | Pakete und Anfrage | Preise, dann das Formular | `packages`, `budgets`, `timelines`, `onInquiry`, `showPackages`, `showInquiry` | Die Kundenleiste ist die kostenlose [Logo Cloud](https://wingo-ui.com/components/logo-cloud), der Ablauf ist die [Steps Section](https://wingo-ui.com/components/steps-section) im Layout `cards`, und die Leute zeigt die [Team Section](https://wingo-ui.com/components/team-section). Alle drei lassen sich über `clientsProps`, `processProps` und `teamProps` anpassen, ein Laufband mit Logos oder eine vertikale Ablaufleiste ist also nur ein Prop entfernt. > Live-Demo (Agency Page): Scroll durch die Studio-Seite, öffne eine Projektkarte, um zu ihren Notizen zu springen, und drück dann bei einem Paket auf Get started: Das Formular öffnet sich mit dem passenden Budget. Probier sie unter [Agency Page](https://wingo-ui.com/templates/agency-page) aus und installier sie mit `npx wingo-ui@latest add agency-page`. ## Wie funktioniert der Hero mit dem wechselnden Wort? Der große Titel hat drei Zeilen: `labels.heroLead` ("We build"), ein Wort aus `heroWords` ("brands", "products", "websites") und `labels.heroTail` ("that people remember."). Die mittlere Zeile ist unsere [Komponente Text Rotate](https://wingo-ui.com/components/text-rotate). Sie tauscht das Wort alle `rotateInterval` Millisekunden (standardmäßig 2600) mit dem `rotateEffect` deiner Wahl: `slide-up`, `slide-down`, `fade`, `blur` oder `flip`. Solange der Zeiger darauf liegt, pausiert sie, bei reduzierter Bewegung steht sie still, und Screenreader hören einmal die ganze Liste statt eines Worts, das sich unter ihnen ändert. Mit `rotate={false}` bleibt das erste Wort stehen. > Live-Demo (Text Rotate): Schau zu, wie das Wort wechselt, und fahr dann mit dem Zeiger darüber: Die Rotation pausiert, bis der Zeiger weg ist. Probier sie unter [Text Rotate](https://wingo-ui.com/components/text-rotate) aus und installier sie mit `npx wingo-ui@latest add text-rotate`. Halte die Wörter kurz. Der Titel wächst auf breiten Bildschirmen bis auf 7rem, und eine Phrase aus zwei Wörtern, die bei 1440px passt, kann auf einem Smartphone mit 360px umbrechen. Teste das längste Wort in Smartphone-Breite, bevor du live gehst. ## Was unterscheidet es von einem Portfolio-Template für Einzelpersonen? Eine Agentur verkauft ein Team und einen Prozess, ein Freelancer verkauft sich selbst. Unser [Template Portfolio Page](https://wingo-ui.com/templates/portfolio-page) ist die Version für Einzelpersonen, und die beiden treffen unterschiedliche Entscheidungen: | | Agency Page | Portfolio Page | |---|---|---| | Case Studies | Karten, die zu den Projektnotizen auf der Seite scrollen (oder zu `href`) | Karten, die ein Sheet öffnen, auf Smartphones ein Bottom Sheet | | Personen | Team-Raster mit einer Kachel für offene Stellen | Eine Person, eine Timeline der Berufserfahrung | | Verkauf | Pakete mit Budgets, Ablaufschritte, Kundenlogos | Leistungen mit Einstiegspreisen, Testimonials, Artikel | | Formular | Leistungen, Budget-Chips, ein Starttermin und ein Briefing mit 30 Zeichen | Name, E-Mail, Projektart und eine Nachricht | Wenn du allein arbeitest und wie ein Studio auftreten willst, starte mit der Agency Page und setz `showTeam={false}`; das Beispiel „Freelancer, fully booked“ auf der Doku-Seite macht genau das. Wenn du als Entwickler einen Job suchst, passt das Portfolio besser, und unser [Guide zum Next.js-Portfolio-Template](https://wingo-ui.com/de/blog/nextjs-portfolio-template) zeigt, was du weglassen kannst. ## Wie richte ich es für mein Studio ein? Installier die Agentur Website Vorlage. Die CLI kopiert den Quellcode in dein Projekt, zusammen mit den Abschnitten, Formularfeldern und Hooks, die sie nutzt: ```bash npx wingo-ui@latest add agency-page ``` Die Seite ist eine Client-Komponente. Leg deine Inhalte also in eine kleine Client-Datei und lass `page.tsx` für die Metadaten auf dem Server. Ersetz die Beispiel-Case-Studies und -Pakete durch deine eigenen; die Typen stehen in der Datendatei: ```tsx // app/studio.tsx "use client"; import Link from "next/link"; import { AgencyPage, type AgencyInquiryValues } from "@/components/templates/agency-page"; import type { AgencyCaseStudy, AgencyPackage } from "@/components/templates/agency-page-data"; // nur deine echten Kunden, Zahlen und Zitate const caseStudies: AgencyCaseStudy[] = [ { slug: "harbor-bank-site", client: "Harbor Bank", title: "Eine Marketing-Website, die das Team selbst pflegt", summary: "60 Seiten auf Next.js und ein Headless CMS mit wiederverwendbaren Blöcken umgezogen.", tags: ["Website", "Engineering"], year: "2026", color: "#2563eb", cover: "site", results: [{ value: "24", label: "Wiederverwendbare Blöcke" }], challenge: "Jede Änderung an einer Seite brauchte einen Entwickler und ein Release in zwei Wochen.", approach: ["Jede Seite geprüft", "Eine Blockbibliothek in Next.js gebaut", "Das Marketing-Team geschult"], duration: "10 Wochen", services: ["website", "engineering"], }, ]; const packages: AgencyPackage[] = [ { id: "sprint", name: "Website-Audit", description: "Ein schriftlicher Plan für deine nächste Website.", price: 6000, unit: "Festpreis", duration: "2 Wochen", features: ["Prüfung von Inhalten und SEO", "Performance-Bericht", "Ein Call zur Roadmap"], budget: "under-25" }, { id: "project", name: "Neue Website", description: "Strategie, Design und ein Build mit Next.js.", price: 30000, from: true, unit: "pro Projekt", duration: "8 bis 12 Wochen", features: ["Design und Texte", "Headless CMS", "30 Tage Fehlerbehebung"], featured: true, budget: "25-50" }, ]; export function Studio({ inquiryAction }: { inquiryAction: (values: AgencyInquiryValues) => Promise }) { return ( ); } ``` Ein leeres `facts`-Array blendet die Zahlen im Hero aus, und das ist besser als „140+ Launches“ ohne etwas dahinter. Alles, was du nicht übergibst, fällt auf die Beispieldaten von Northwind Studio zurück. Deshalb bleiben die Kundenlogos hier ausgeblendet, bis du echte hast, und Leistungen und Ablaufschritte brauchen vor dem Launch deine eigenen Texte. Das `budget` jedes Pakets muss zu einem `value` in `budgets` passen (die Standardwerte reichen von `under-25` bis `100-plus`), und die `services`-IDs einer Case Study entsprechen den Leistungskarten, damit Start a similar project die richtigen Chips auswählt. ## Wie binde ich das Anfrageformular an? Das Anfrageformular gibt seine Werte an `onInquiry` weiter, also übergib ihm eine Funktion, die ein Promise zurückgibt. Sie bekommt `{ name, email, company, services, budget, timeline, brief }`. Der Button zeigt währenddessen einen Ladezustand; bei einem Fehler bleibt das Formular ausgefüllt und zeigt `labels.failed`. Ohne `onInquiry` wartet die Seite 900 ms und bedankt sich beim Absender, ohne etwas zu senden. Für eine Demo ist das in Ordnung, in Produktion ist es ein verlorener Lead. Eine Server Action reicht: ```ts // app/actions.ts "use server"; import type { AgencyInquiryValues } from "@/components/templates/agency-page"; export async function sendInquiry(values: AgencyInquiryValues) { // das Formular prüft das schon im Client; prüf es auf dem Server noch einmal if (!values.name.trim() || !values.email.includes("@") || values.brief.trim().length < 30) { throw new Error("Ungültige Anfrage"); } // hier die Anfrage speichern oder über deinen Mail-Anbieter verschicken } ``` ```tsx // app/page.tsx import type { Metadata } from "next"; import { sendInquiry } from "./actions"; import { Studio } from "./studio"; export const metadata: Metadata = { title: "Bayside Studio", description: "Design und Websites mit Next.js für wachsende Teams in New York.", }; export default function Page() { return ; } ``` Das Prop von `Studio` heißt mit Absicht `inquiryAction`: Das TypeScript-Plugin von Next.js beanstandet Funktions-Props in einer Einstiegsdatei mit `"use client"`, es sei denn, der Name lautet `action` oder endet auf `Action`. Im Client verlangt das Formular einen Namen, eine gültige E-Mail-Adresse, einen Budget-Chip und ein Briefing mit mindestens 30 Zeichen, und es setzt den Fokus auf das erste fehlerhafte Feld. Ein leeres `budgets`- oder `timelines`-Array entfernt das jeweilige Feld. Wenn du stattdessen eine allgemeine Kontaktseite mit Kanälen, Öffnungszeiten und Karte brauchst: Das [Template Contact Page](https://wingo-ui.com/templates/contact-page) ist kostenlos. ## Wie funktioniert es auf dem Smartphone? Unter 768px ändert sich die Seite an drei Stellen: bei den Projektkarten, beim Feld für den Zeitrahmen und mit einem fixierten Call to Action. Die Projektkarten liegen in einer horizontalen Leiste mit Snap, in der die nächste Karte schon angeschnitten ist, statt dass vier hohe Karten untereinander stehen. Das Feld für den Zeitrahmen ist unser [Select](https://wingo-ui.com/components/select), das sich auf Smartphones als Bottom Sheet öffnet, und Budget und Leistungen wählst du über Chips aus der [Toggle Group](https://wingo-ui.com/components/toggle-group). Sobald der Hero aus dem Bild scrollt, schiebt sich von unten eine Leiste mit Start a project ins Bild, mit `env(safe-area-inset-bottom)` über dem Home-Indikator des iPhones, und sobald das Formular erscheint, verschwindet sie wieder, damit sie nie die Felder verdeckt. Mit `stickyBar={false}` schaltest du sie ab. Jede Projektkarte ist ein einziger Link. Standardmäßig scrollt sie zu ihren Notizen weiter unten auf der Seite und setzt den Fokus dorthin. Wenn jede Case Study als eigene Seite indexiert werden soll, gib ihr ein `href`, oder setz `showCaseNotes={false}`: Dann führen die Karten ohne `href` zu `/work/`, einer normalen Route, die du selbst baust. ## Ist es kostenlos, und was kostet Pro? Agency Page, Portfolio Page, Text Rotate und Steps Section sind Pro-Items. Contact Page und Logo Cloud gehören zu den 75 kostenlosen von 371 Items im Katalog, Stand 6. November 2026. Pro kostet $8 im Monat, $80 im Jahr oder einmalig $150 für lebenslangen Zugang (siehe [Preise](https://wingo-ui.com/de/pricing)), und die Rückerstattung innerhalb von 14 Tagen gilt nur, solange du noch kein Pro-Item heruntergeladen hast. Wenn ein kostenloses Repository oder das Kit von nextjstemplates.com mit CMS und Auth besser zu deinem Projekt passt, nimm das. Wenn du ein Nextjs Agency Template suchst, in dem Projektnotizen, Pakete und Anfrageformular schon gebaut sind, im Light und Dark Mode, installier es und steck deine Zeit in die Case Studies, denn mit ihnen gewinnst du das Briefing. Weitere komplette Seiten, die genauso gebaut sind, findest du unter [Praxis: Screens und Apps](https://wingo-ui.com/de/blog/category/build), und unser [Guide zum SaaS Website Template](https://wingo-ui.com/de/blog/saas-website-template) zeigt die Marketing-Website, die ein Produkt braucht. ## Komponenten in diesem Artikel - [Agency Page](https://wingo-ui.com/templates/agency-page) (Pro): A React agency website template: rotating hero, services, case studies, process, team, packages and a project inquiry form. Installation: `npx wingo-ui@latest add agency-page` - [Portfolio Page](https://wingo-ui.com/templates/portfolio-page) (Pro): A React portfolio template for designers and developers: hero, case studies in a sheet, experience, priced services, writing and contact. Installation: `npx wingo-ui@latest add portfolio-page` - [Text Rotate](https://wingo-ui.com/components/text-rotate) (Pro): A rotating word for headlines that cycles through a list of words or short phrases in place, inside a sentence that reflows to fit each one. Installation: `npx wingo-ui@latest add text-rotate` - [Steps Section](https://wingo-ui.com/components/steps-section) (Pro): A How it works section: three to five numbered steps, each with an icon, a title, a line of text and a small drawn product visual. Installation: `npx wingo-ui@latest add steps-section` - [Contact Page](https://wingo-ui.com/templates/contact-page) (Free): A React contact page template: a validated form, copyable channels with live office hours, offices on a drawn map, a short FAQ and logos. Installation: `npx wingo-ui@latest add contact-page` ## Häufige Fragen ### Was gehört auf eine Agentur-Website? Leistungen mit konkreten Ergebnissen, drei oder vier Case Studies mit Ausgangslage, Vorgehen und Resultat, der Ablauf, die Leute, die die Arbeit machen, Einstiegspreise und ein Anfrageformular. Jeder Abschnitt sollte eine Frage beantworten, die sich ein Kunde stellt, bevor er ein Briefing schickt. ### Gibt es ein kostenloses Next.js-Template für Agenturen? Ein paar. Das GitHub-Topic agency-website-template führte am 6. November 2026 13 öffentliche Repositories, nextjs-agency-template eines. Die Agency Page von Wingo UI ist ein Pro-Item, das Template Contact Page und der Abschnitt Logo Cloud sind dagegen kostenlos. ### Was unterscheidet ein Agentur-Template von einem Portfolio-Template? Ein Agentur-Template verkauft ein Team und einen Prozess: Leistungen, Team, Pakete und ein Anfrageformular, das nach dem Budget fragt. Ein Portfolio-Template verkauft eine einzelne Person: ihre Projekte, ihre Erfahrung und ein einfacheres Kontaktformular. ### Sollte eine Agentur-Website Preise zeigen? Einstiegspreise filtern Projekte heraus, die du ohnehin ablehnen würdest, und senken die Hürde, eine Anfrage zu schicken. Die Agency Page zeigt Pakete mit einem Ab-Preis, und Get started wählt im Formular den passenden Budget-Chip aus. ### Wie empfange ich die Anfragen? Gib onInquiry eine Funktion, die ein Promise zurückgibt, zum Beispiel eine Server Action von Next.js, die die Anfrage speichert oder per E-Mail weiterschickt. Der Button zeigt währenddessen einen Ladezustand, und bei einem Fehler bleibt alles Eingetippte stehen und eine Fehlermeldung erscheint. --- Quelle: https://wingo-ui.com/de/blog/nextjs-agency-template