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

> Ein Immobilien Website Template für Next.js mit Suche nach Kauf und Miete, Inseratskarten, Preis-Pins, Kreditrechner, Bewertungsformular und Mobil-Layout.

- 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: 10 Min.
- Kanonische URL: https://wingo-ui.com/de/blog/nextjs-real-estate-template
- Englische Fassung: https://wingo-ui.com/blog/nextjs-real-estate-template

## Kurz gesagt

Ein Immobilien Website Template braucht mehr als einen Hero und ein Raster voller Häuser: eine Suche nach Kauf oder Miete, die live filtert, Inseratskarten mit Preis und Eckdaten, eine Karte mit Preis-Pins, Kacheln für die Viertel, einen Kreditrechner und ein Bewertungsformular, das Verkäufer gewinnt. Die Real Estate Page von Wingo UI (Pro) bringt all das in einer Client-Komponente mit, mit Callbacks für die Suche, gemerkte Objekte und Bewertungsanfragen. Für eine Ergebnisseite mit Hunderten Objekten nimmst du das Listing Grid dazu und auf dem Smartphone einen Umschalter zwischen Liste und Karte.

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](https://wingo-ui.com/templates/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:

| Abschnitt | Die Frage der Besucher | Was dazugehört |
| --- | --- | --- |
| Suche | „Ist etwas für mich dabei?“ | Kauf oder Miete, Ort, Preis, Schlafzimmer, eine Live-Anzahl |
| Ausgewählte Objekte | „Zeig her“ | Karten mit Foto, Preis, Schlafzimmern, Bädern, Fläche und einem Herz |
| Karte | „Wo liegen sie?“ | Preis-Pins und eine Liste, die ein Objekt in der Vorschau zeigen, ohne die Seite zu verlassen |
| Viertel | „Welche Gegend passt?“ | Medianpreis oder Medianmiete, Trend, Zahl der Angebote |
| Kredit | „Kann ich mir das leisten?“ | Preis, Anzahlung, Zinssatz, Laufzeit, die monatliche Summe und ihre Bestandteile |
| Makler | „Mit wem spreche ich?“ | Name, Gebiete, Sprachen, Anrufen und E-Mail |
| Bewertung | „Was ist meine Immobilie wert?“ | Ein kurzes Formular, das aus einem Eigentümer einen Lead macht |

Stand 6. November 2026 kostet das [Template Homely bei WrapPixel](https://wrappixel.com/templates/homely-nextjs-template-for-real-estate) $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](https://www.sanity.io/templates/clay-modern-real-estate-next-js-template) 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:

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

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

```tsx
// 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.

> Live-Demo (Real Estate Page): Tipp Williamsburg in die Suche, öffne den Pin auf der Karte und drück „Estimate payment“: Der Rechner darunter übernimmt den Preis dieses Objekts. Wechsel dann auf „Rent“ und sieh zu, wie sich Objekte, Pins und Preisstufen ändern. Probier sie unter [Real Estate Page](https://wingo-ui.com/templates/real-estate-page) aus und installier sie mit `npx wingo-ui@latest add real-estate-page`.

## 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](https://wingo-ui.com/components/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:

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

> Live-Demo (Listing card): Im Listen-Layout zeigt die Wohnung in Park Slope ihren Preis pro Quadratfuß unter dem Preis. Wisch oder zieh durch die Fotos und tipp dann aufs Herz, um sie zu merken. Probier sie unter [Listing card](https://wingo-ui.com/components/listing-card) aus und installier sie mit `npx wingo-ui@latest add listing-card`.

Das [Listing Grid](https://wingo-ui.com/components/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](https://wingo-ui.com/components/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:

```tsx
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](https://wingo-ui.com/components/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](https://wingo-ui.com/components/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](https://wingo-ui.com/components/segmented-control); `ResultsMap` ist deine eigene Karte:

```tsx
"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:

```ts
// 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](https://wingo-ui.com/de/pricing), 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](https://wingo-ui.com/de/blog/react-marketplace-template) diese Screens rund um eine Such-URL.

Weitere komplette Screens findest du in der [Kategorie Build it](https://wingo-ui.com/de/blog/category/build), und das [Tutorial zum Next.js Admin Dashboard](https://wingo-ui.com/de/blog/nextjs-admin-dashboard-tutorial) behandelt das Backoffice, in dem Makler diese Objekte verwalten würden.

## Probier es aus, bevor du es installierst

Öffne das [Template Real Estate Page](https://wingo-ui.com/templates/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.

## Komponenten in diesem Artikel

- [Real Estate Page](https://wingo-ui.com/templates/real-estate-page) (Pro): A React real estate template: buy or rent search, listing cards, a price pin map, neighborhoods, a mortgage estimate and a valuation form. Installation: `npx wingo-ui@latest add real-estate-page`
- [Listing card](https://wingo-ui.com/components/listing-card) (Pro): A React listing card for marketplaces: swipeable photos, price, place and time, badges and a heart, in grid, list and compact layouts. Installation: `npx wingo-ui@latest add listing-card`
- [Listing grid](https://wingo-ui.com/components/listing-grid) (Pro): A React listing grid for marketplace results: count, sort, view switch and filter chips over listing cards that load more as you scroll. Installation: `npx wingo-ui@latest add listing-grid`
- [Location Map](https://wingo-ui.com/components/location-map) (Pro): A React location map to pick or show a place: a draggable pin, an optional radius with a towns count, offline search and a static fallback. Installation: `npx wingo-ui@latest add location-map`
- [Price range](https://wingo-ui.com/components/price-range) (Pro): A React price range filter: a histogram of the results over a two-thumb slider, synced min and max inputs, preset chips and a live count. Installation: `npx wingo-ui@latest add price-range`

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

---

Quelle: https://wingo-ui.com/de/blog/nextjs-real-estate-template