Next.js Immobilien Website Template: Suche, Karte, Kredit

Du baust eine Website für einen Makler oder ein Start-up mit Immobilienangeboten, und das Immobilien Website Template, das du findest, bringt meist einen Hero, ein Raster mit Häusern und ein Kontaktformular mit. Ein Template, mit dem Käufer wirklich suchen, braucht mehr. Käufer wechseln zwischen Kaufen und Mieten, grenzen nach Preis und Schlafzimmern ein, schauen, wo die Objekte liegen, und wollen die monatliche Rate kennen, bevor sie irgendwen anrufen. Verkäufer wollen wissen, was ihre Immobilie wert ist. Dieser Guide geht jeden Teil einer Immobilien-Website durch, die Käufer tatsächlich nutzen: wie die Real Estate Page von Wingo UI ihn löst und wie sich das Layout auf dem Smartphone ändert. Wir bauen Wingo UI, neutral sind wir also nicht; die Muster funktionieren mit beliebigen Komponenten.

Was braucht ein Immobilien Website Template?

Sieben Abschnitte, ungefähr in dieser Reihenfolge, weil Besucher ihre Fragen in genau dieser Reihenfolge haben:

Stand 6. November 2026 kostet das Template Homely bei WrapPixel (opens in a new tab) $29 für eine Lizenz zur einmaligen Nutzung oder $59 für mehrfache Nutzung. Laut Beschreibung enthält es eine Startseite, eine Objektliste, eine Detailseite, einen Blog, eine Kontaktseite und eine 404-Seite auf Next.js 15, React 19, Tailwind v4 und shadcn. Das Template Clay bei Sanity (opens in a new tab) ist kostenpflichtig, läuft auf Next.js 14 mit Sanity als CMS und ergänzt einen Blog und ein Kontaktformular für Makler über Resend. Keine der beiden Beschreibungen erwähnt eine Karte, einen Kreditrechner oder ein Bewertungsformular. Für eine Website mit CMS, bei der du die Suche selbst baust, sind beide ein brauchbarer Ausgangspunkt.

Wie fügst du das Template in eine Next.js-App ein?

Installier es mit der CLI. Sie kopiert die Seite, ihre Beispieldaten und jede Komponente, die sie nutzt, als Quellcode in dein Projekt:

npx wingo-ui@latest add real-estate-page

Die Seite ist eine Client-Komponente. Lade deine Objekte auf dem Server und gib sie zusammen mit deinen Handlern an eine kleine Client-Ansicht weiter:

// app/page.tsx
import { getListings, getNeighborhoods } from "@/lib/listings"
import { HomesView } from "./homes-view"

export default async function Page() {
  const [listings, neighborhoods] = await Promise.all([getListings(), getNeighborhoods()])
  return <HomesView listings={listings} neighborhoods={neighborhoods} />
}

// app/homes-view.tsx
"use client"

import Link from "next/link"
import { RealEstatePage, type RealEstateSearch } from "@/components/templates/real-estate-page"
import type { RealEstateListing, RealEstateNeighborhood } from "@/components/templates/real-estate-page-data"
import { requestValuation, saveHome } from "./actions"

export function HomesView({
  listings,
  neighborhoods,
}: {
  listings: RealEstateListing[]
  neighborhoods: RealEstateNeighborhood[]
}) {
  const syncUrl = ({ mode, location, price, minBeds }: RealEstateSearch) => {
    const params = new URLSearchParams({ mode })
    if (location) params.set("loc", location)
    if (price[0] != null) params.set("min", String(price[0]))
    if (price[1] != null) params.set("max", String(price[1]))
    if (minBeds > 0) params.set("beds", String(minBeds))
    window.history.replaceState(null, "", `?${params}`)
  }

  return (
    <RealEstatePage
      linkComponent={Link}
      listings={listings}
      neighborhoods={neighborhoods}
      phone="(718) 555-0100"
      mapBounds={{ north: 40.742, south: 40.66, west: -74.01, east: -73.918 }}
      onSearch={syncUrl}
      onFavoriteChange={(listing, favorite) => saveHome(listing.id, favorite)}
      onValuation={requestValuation}
    />
  )
}

Jedes Objekt ist { id, mode, price, address, neighborhood, city, beds, baths, sqft, kind, color, lat, lng }, dazu optional previousPrice, image, badge, href und favorite. Ohne image zeichnet die Inseratskarte eine eingefärbte Illustration der Objektart aus kind (brownstone, condo, loft, house, townhouse). Das hilft, solange die Fotos noch fehlen. Alle Texte stehen in labels.

Ersetz die Beispielinhalte vor dem Launch. Die Zahlen unter der Suche („1,200+ homes sold since 2009“), die Makler, die Kundenstimmen und die Maklerzeile im Footer gehören alle zur fiktiven Agentur Harbor & Pine. Übergib deine eigenen stats (oder stats={[]}, um sie auszublenden), agents und testimonials und setz labels.brand und labels.legal. Beispielbewertungen und -verkaufszahlen dürfen nie auf eine echte Website gelangen.

Wie sollte die Suche nach Kauf oder Miete funktionieren?

Der Umschalter zwischen Kauf und Miete ändert alles, was danach kommt: die ausgewählten Objekte, die Pins auf der Karte, die Mediane der Viertel (Kaufpreis oder Miete) und die Preisstufen. Beim Umschalten setzt sich der Preisfilter absichtlich zurück, denn eine Spanne von $1M bis $2M ergibt bei Mietwohnungen keinen Sinn. Das Ortsfeld durchsucht beim Tippen Adresse, Viertel und Stadt, also funktionieren „11215“, „Union Street“ und „Park Slope“ gleichermaßen. Die Anzahl über den Objekten ist eine Live-Region im Modus polite: Screenreader hören „4 homes for sale“, ohne dass der Fokus springt.

Gefiltert werden die Objekte, die du übergibst. Für die 10 bis 50 Objekte, die ein Makler hervorhebt, reicht das. onSearch feuert bei „Search“, bei „Show homes“ im Filter-Sheet auf dem Smartphone und bei einem Tipp auf eine Viertel-Kachel, jeweils mit { mode, location, price: [min, max], minBeds }. Damit synchronisierst du die URL oder schickst Besucher auf eine vollständige Ergebnisseite. Von außen steuerbar ist nur mode. Für Deep Links, die die ganze Suche wiederherstellen, baust du die Ergebnisseite also mit dem Listing Grid.

Was gehört auf eine Inseratskarte für Immobilien?

Ein gutes Exposé-Design beginnt schon auf der Karte: Sie zeigt die entscheidenden Fakten, damit Leute seltener Objekte antippen, die sie ohnehin aussortieren würden. Das sind der Preis (nach einer Preissenkung auch der alte), Schlafzimmer, Bäder, Fläche, das Viertel und ein kurzes Badge wie „Open house Sat“. Die Inseratskarte im Template macht genau das, mit einem Herz, das sich zurücksetzt, wenn onFavoriteChange fehlschlägt.

Für eine Ergebnisseite mit echten Fotos nimmst du die Listing Card. Auf dem Smartphone wischst du durch mehrere Fotos (vertikales Scrollen hat trotzdem Vorrang, und ein Wisch öffnet nie das Objekt), unter dem Betrag steht der Preis pro Quadratfuß, und es gibt die Layouts Raster, Liste und kompakt. So bildest du ein Objekt auf ihr ListingData ab:

import { ListingCard, type ListingData } from "@/components/ui/listing-card"

const home: ListingData = {
  id: "h-482",
  title: "Brownstone-Maisonette mit 3 Schlafzimmern und Garten",
  href: "/homes/h-482",
  images: [
    { src: "/homes/h-482/front.jpg", alt: "Das Brownstone von der Union Street aus" },
    { src: "/homes/h-482/kitchen.jpg", alt: "Die Küche" },
  ],
  price: 1_895_000,
  compareAtPrice: 1_950_000,
  currency: "USD",
  unit: { quantity: 1_840, unit: "sq ft" },
  location: "Brooklyn, Park Slope",
  attributes: ["3 Schlafzimmer", "2 Bäder", "1.840 sq ft"],
  badges: [{ label: "Besichtigung Sa", tone: "info" }],
}

export function HomeCard() {
  return <ListingCard listing={home} imageAspect="16/10" size="lg" />
}

Für Mietobjekte ergänzt du priceSuffix: "/mo". Das Fotoformat 16/10 passt zu Immobilien besser als das Standardformat 4/3.

Das Listing Grid packt diese Karten in eine Ergebnisseite: die Anzahl, eine Sortierung (auf dem Smartphone ein Bottom Sheet), einen Umschalter zwischen Raster und Liste, den es sich pro Besucher merken kann, entfernbare Filter-Chips und Nachladen beim Scrollen.

Wie funktioniert die Karte mit Preis-Pins, und wann brauchst du eine echte Karte?

Im Kartenbereich des Templates erscheint jedes passende Objekt als Pin mit seinem kompakten Preis („$1.25M“, „$4,200“), daneben eine Liste derselben Objekte. Ein Pin oder eine Zeile öffnet eine Vorschaukarte mit „View home“ und „Estimate payment“. Escape oder der Schließen-Button schließt sie, und der Fokus kehrt zum Pin zurück. Die Karte ist gezeichnet, nicht aus Kacheln zusammengesetzt: Die Pins sitzen anhand von lat und lng innerhalb der mapBounds, die du übergibst. Das heißt kein API-Key, keine Rechnung für Kacheln und keine Kartenbibliothek auf einer Landingpage, für die ausgewählten Objekte einer Stadt der richtige Kompromiss. Die Straßen rund um ein Objekt zeigt sie allerdings nicht.

Für die Straßenansicht eines einzelnen Objekts auf einer Detailseite nimmst du die Location Map. Sie basiert auf Leaflet mit Kacheln von OpenStreetMap, lädt erst, wenn sie in die Nähe des Viewports kommt, und fällt ohne Netzwerk auf eine gezeichnete Karte zurück:

import { LocationMap } from "@/components/ui/location-map"

export function HomeLocation({ lat, lng }: { lat: number; lng: number }) {
  return <LocationMap value={{ lat, lng }} readOnly defaultZoom={15} height={280} locale="en-US" />
}

Drei Einschränkungen aus ihrer Doku. Die öffentlichen Kacheln von OpenStreetMap sind für geringe Nutzung gedacht, lass tileUrl in Produktion also auf deinen eigenen Anbieter zeigen. readOnly blendet die Suche aus, aber wo ein Makler ein Objekt auf der Karte setzt (etwa in einem Formular zum Anlegen eines Objekts), kennt die Offline-Suche standardmäßig nur rumänische Orte: Übergib geocoder={nominatimGeocoder({ email, countryCodes: "us" })} oder deinen eigenen Geocoder. Und die Zeile unter der Karte benennt den Ort aus derselben rumänischen Liste, ein Objekt in den USA zeigt dort also nur seine Koordinaten, solange du nicht reverseGeocoder={nominatimReverseGeocoder({ email })} übergibst. Sie zeigt genau einen Pin. Für eine Ergebniskarte mit Hunderten Objekten und Clustering nutzt du MapLibre oder Leaflet mit einem Cluster-Plugin direkt. Der Block Listing Detail Page setzt bereits eine Location Map auf die Detailseite.

Was passiert auf dem Smartphone?

Unter 768px ändert das Template seine Form, statt nur zu schrumpfen:

• Die Suche wird zu einer gestapelten Card: oben der Umschalter zwischen Kauf und Miete, dann das Ortsfeld und darunter „Filters“ und „Search“ nebeneinander. Die Auswahlfelder für Preis und Schlafzimmer verschwinden.
• „Filters“ öffnet ein Bottom Sheet mit der Price Range (ein Histogramm der aktuellen Objekte über einem Slider mit zwei Reglern, Felder für Min und Max und Chips mit Voreinstellungen) und einem Umschalter für die Schlafzimmer. Der Button zeigt beim Ziehen „Show 4 homes“, damit niemand einen Filter anwendet, der nichts findet.
• Die ausgewählten Objekte werden zu einer Leiste mit Snap-Scrolling: Jede Inseratskarte ist 82% so breit wie der Bildschirm, also schaut die nächste hervor und zeigt, dass es noch mehr zum Wischen gibt.
• Im Kartenbereich steht die Liste über der Karte, auf 300px begrenzt und eigenständig scrollbar, darunter eine Karte mit 320px Höhe.

Dieser gestapelte Kartenbereich funktioniert für ein Dutzend ausgewählter Objekte. Auf einer Ergebnisseite mit einer langen Liste nicht: Die Karte landet unter einer Liste, die Besucher nie zu Ende scrollen. Zeig stattdessen immer nur eine Ansicht, mit einem Umschalter zwischen Liste und Karte, der in Daumennähe fixiert ist. Hier das Muster mit dem Listing Grid und dem kostenlosen Segmented Control; ResultsMap ist deine eigene Karte:

"use client"

import { useState } from "react"
import { List, Map as MapIcon } from "lucide-react"
import { ListingGrid } from "@/components/ui/listing-grid"
import type { ListingData } from "@/components/ui/listing-card"
import { SegmentedControl } from "@/components/ui/segmented-control"
import { ResultsMap } from "./results-map"

export function Results({ homes, total }: { homes: ListingData[]; total: number }) {
  const [view, setView] = useState("list")
  return (
    <div className="md:grid md:grid-cols-2 md:gap-6">
      <div className={view === "map" ? "max-md:hidden" : undefined}>
        <ListingGrid items={homes} total={total} defaultView="list" imageAspect="16/10" columns={{ base: 1, xl: 2 }} />
      </div>
      <div className={view === "list" ? "max-md:hidden" : "max-md:h-[calc(100dvh-8rem)]"}>
        <ResultsMap homes={homes} />
      </div>
      <div className="fixed inset-x-0 bottom-[max(1rem,env(safe-area-inset-bottom))] z-sticky flex justify-center md:hidden">
        <SegmentedControl
          aria-label="Ergebnisse anzeigen als"
          value={view}
          onValueChange={setView}
          options={[
            { value: "list", label: "Liste", icon: <List /> },
            { value: "map", label: "Karte", icon: <MapIcon /> },
          ]}
          className="shadow-floating"
        />
      </div>
    </div>
  )
}

Beide Ansichten bleiben gemountet. Die Karte behält also ihre Position und die Liste ihre Scrollposition, wenn Besucher zurückwechseln. Ein Haken: Eine Kartenbibliothek misst ihren Container, und ein Container mit display: none misst null. Ruf deshalb in ResultsMap map.resize() (MapLibre) oder map.invalidateSize() (Leaflet) auf, sobald die Kartenansicht sichtbar wird. Ab 768px verschwindet der Umschalter, und Liste und Karte stehen nebeneinander.

Wie berechnet der Kreditrechner die monatliche Rate?

Der Rechner nutzt für Zins und Tilgung die übliche Annuitätenformel und addiert dann pro Monat Grundsteuer (ein jährlicher Prozentsatz des Preises), Versicherung und HOA-Gebühren. Mit den Standardwerten (ein Objekt für $1,250,000, 20% Anzahlung, 6,5% über 30 Jahre, 0,9% Grundsteuer und $150 Versicherung) beträgt der Kredit $1,000,000, Zins und Tilgung ergeben $6,321, die Grundsteuer kommt mit $938 dazu, und die Schätzung liegt bei $7,408 im Monat. Der Balken mit der Aufschlüsselung und die Summen ändern sich, während du die Slider bewegst (Pfeiltasten und Bild auf / Bild ab funktionieren auch).

Die Durchschnittswerte deines Markts setzt du über die Prop mortgage, zum Beispiel mortgage={{ taxRate: 1.1, insurance: 120, hoa: 350 }}; alles, was du weglässt, behält seinen Standardwert. „Estimate payment“ in einer Kartenvorschau überträgt den Preis dieses Objekts in den Rechner und scrollt zu ihm. Behalt den Hinweis, dass es sich nur um eine Schätzung zur Planung handelt, und formulier nichts so, dass es nach einem Kreditangebot klingt.

Wie verdrahtest du das Bewertungsformular?

Auf einem Immobilien Landingpage Template ist der Bewertungsbereich die Lead-Erfassung für Verkäufer. Das Formular prüft Adresse, Name und E-Mail, fokussiert das erste Problem und ruft onValuation mit { address, propertyType, beds, timeline, name, email, phone } auf. Ein zurückgegebenes Promise hält den Spinner im Button am Laufen; schlägt es fehl, bleibt alles Eingetippte stehen, und labels.failed erscheint. Eine Server Action passt dazu:

// app/actions.ts
"use server"

import type { RealEstateValuationValues } from "@/components/templates/real-estate-page"
import { db } from "@/lib/db"

export async function requestValuation(values: RealEstateValuationValues) {
  if (!values.address?.trim() || !values.name?.trim() || !values.email?.includes("@")) {
    throw new Error("ungültige Anfrage")
  }
  await db.valuationRequest.create({ data: { ...values, createdAt: new Date() } })
}

export async function saveHome(listingId: string, favorite: boolean) {
  // hier die Session prüfen; ein throw setzt das Herz zurück
  await db.savedHome.upsert({ listingId, favorite })
}

db steht für deine eigene Datenschicht. Validier wie hier noch einmal auf dem Server: Eine Server Action ist ein öffentlicher Endpunkt, und die TypeScript-Typen gibt es zur Laufzeit nicht. Ohne onValuation tut das Formular 900 ms lang so, als würde es senden, und bestätigt dann. Für eine Vorschau ist das in Ordnung, für Produktion falsch.

Welche Teile sind kostenlos und welche Pro?

Die Real Estate Page, die Listing Card, das Listing Grid, die Location Map und die Price Range sind Pro-Items. Das Segmented Control ist kostenlos, zusammen mit 74 weiteren der 369 Items im Katalog. Pro kostet $8 im Monat, $80 im Jahr oder einmalig $150 auf der Preisseite, und die Rückerstattung innerhalb von 14 Tagen gilt, solange du kein Pro-Item heruntergeladen hast. Auf einer Immobilien-Website mit React ist das Template meist der erste Screen, danach kommen eine Ergebnisseite mit dem Listing Grid und eine Detailseite. Brauchst du eher ein Immobilienportal Template im Stil eines Kleinanzeigenmarkts, baut das Tutorial zum React Marketplace Template diese Screens rund um eine Such-URL.

Weitere komplette Screens findest du in der Kategorie Build it, und das Tutorial zum Next.js Admin Dashboard behandelt das Backoffice, in dem Makler diese Objekte verwalten würden.

Probier es aus, bevor du es installierst

Öffne das Template Real Estate Page auf deinem Smartphone, wechsel auf „Rent“, öffne „Filters“, zieh am Preis und tipp dann auf einen Pin. Wenn es zu deinem Projekt passt, kopiert npx wingo-ui@latest add real-estate-page dieses nextjs real estate template mit einem Pro-Account in deine App, bereit für deine Objekte, deine Kartengrenzen und deine Bewertungs-Action.

Häufige Fragen

Gibt es ein kostenloses Immobilien Website Template für Next.js?

Die beiden ausgereiften Templates, die wir am 2026-11-06 geprüft haben, kosten Geld: Homely kostet bei WrapPixel $29 für eine Lizenz zur einmaligen Nutzung, und Sanity führt das Template Clay als kostenpflichtig. Die Real Estate Page von Wingo UI ist ein Pro-Item und im Plan für $8 im Monat enthalten.

Welche Seiten braucht eine Immobilien-Website?

Eine Startseite mit Suche nach Kauf oder Miete, eine Ergebnisseite mit Filtern und Karte, eine Detailseite pro Objekt mit Fotos, Eckdaten und Lage und einen Weg, über den Eigentümer eine Bewertung anfragen. Maklerprofile, Guides zu den Vierteln und ein Kreditrechner sorgen dafür, dass Käufer bleiben.

Wie sollte die Kartensuche für Immobilien auf dem Smartphone funktionieren?

Zeig entweder die Liste oder die Karte, nicht beides, und schalte mit einem Umschalter um, den der Daumen erreicht. Die Pins sollten den Preis zeigen, und ein Tipp auf einen Pin sollte eine kurze Vorschau öffnen, statt die Ergebnisse zu verlassen.

Wie berechnet man die monatliche Rate eines Immobilienkredits?

Zins und Tilgung folgen der üblichen Annuitätenformel: Kreditbetrag mal Monatszins, geteilt durch eins minus (1 + Monatszins) hoch minus die Zahl der Monate. Grundsteuer, Versicherung und HOA-Gebühren kommen danach pro Monat dazu.

Braucht das Template einen API-Key für Google Maps oder Mapbox?

Nein. Das Template zeichnet seine eigene Karte und setzt die Pins anhand von Breiten- und Längengrad in die Grenzen, die du übergibst, also gibt es keinen Key und keine Rechnung für Kacheln. Die separate Komponente Location Map nutzt standardmäßig Leaflet mit Kacheln von OpenStreetMap, und in Produktion stellst du sie auf deinen eigenen Kachel-Anbieter um.