Agentur Website Template für Next.js: Vom Besuch zur Anfrage

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 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 (opens in a new tab) (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 (opens in a new tab) führte am 6. November 2026 13 öffentliche Repositories, nextjs-agency-template (opens in a new tab) 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:

Die Kundenleiste ist die kostenlose Logo Cloud, der Ablauf ist die Steps Section im Layout cards, und die Leute zeigt die 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.

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. 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.

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 ist die Version für Einzelpersonen, und die beiden treffen unterschiedliche Entscheidungen:

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 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:

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:

// 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<void> }) {
  return (
    <AgencyPage
      linkComponent={Link}
      heroWords={["Websites", "Shops", "Apps"]}
      labels={{
        brand: "Bayside Studio",
        home: "Bayside Studio, Startseite",
        heroLead: "Wir gestalten",
        heroTail: "für wachsende Teams in New York.",
        heroDescription: "Ein Studio mit drei Leuten für Design und Builds mit Next.js, vom ersten Call bis zum Launch.",
        available: "Freie Kapazität für Projekte ab Februar 2027",
        tagline: "Ein Studio für Design und Entwicklung in New York.",
        legal: "© 2026 Bayside Studio LLC.",
      }}
      email="hello@bayside.example"
      facts={[]}
      caseStudies={caseStudies}
      packages={packages}
      showClients={false}
      showTeam={false}
      onInquiry={inquiryAction}
    />
  );
}

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:

// 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
}

// 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 <Studio inquiryAction={sendInquiry} />;
}

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 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, das sich auf Smartphones als Bottom Sheet öffnet, und Budget und Leistungen wählst du über Chips aus der 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/<slug>, 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), 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, und unser Guide zum SaaS Website Template zeigt die Marketing-Website, die ein Produkt braucht.

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.