Next.js Restaurant Website Vorlage: Menü und Reservierung

Drei Fragen bringen Gäste dazu, zum Telefon zu greifen: Habt ihr offen, was gibt es zu essen, und ist um acht noch ein Tisch frei? Eine Restaurant Website Vorlage lohnt sich, wenn die Seite alle drei beantwortet, bevor der Gast ans Anrufen denkt, und zwar auf dem Smartphone und in der Zeitzone des Restaurants. Dieser Guide stellt die Restaurant Page von Wingo UI vor, eine Next.js-Restaurant-Website aus Komponenten im Quellcode: was jeder Abschnitt macht, wie du deine Öffnungszeiten, deine Speisekarte und deine Buchungs-API anschließt und wie sie sich gegen die Angebote schlägt, die du auf ThemeForest und in CMS-Galerien unter „nextjs restaurant template“ findest.

Was sollte eine Restaurant-Website zuerst beantworten?

Die Fragen des Gastes, in der Reihenfolge, in der er sie stellt:

1. Jetzt geöffnet? Eine Zeile, die man in einer Sekunde liest: Geöffnet bis 23 Uhr, Schließt bald oder Jetzt geschlossen, öffnet morgen um 10 Uhr. Eine Tabelle mit Öffnungszeiten lässt den Gast selbst rechnen.
2. Was steht auf der Speisekarte? Echter Text mit Preisen, in Abschnitte aufgeteilt, und ein Weg, die veganen oder glutenfreien Gerichte zu finden, ohne alles zu lesen.
3. Kann ich reservieren? Ein Formular, das weiß, an welchen Tagen geschlossen ist, welche Zeiten noch frei sind und bis wann die letzten Gäste noch einen Tisch bekommen.

Danach kommt alles, was bei der Entscheidung für dich hilft: Fotos, die Geschichte des Küchenchefs, Bewertungen, private Events, die Adresse mit Wegbeschreibung und eine Karte. Die meisten Restaurant-Landingpage-Vorlagen, deren Beschreibungen wir gelesen haben, decken Fotos und Geschichte gut ab. Kaum eine sagt etwas zu Zeitzonen, der spätesten Reservierungszeit, belegten Slots oder dazu, was die Speisekarte auf einem 390px breiten Bildschirm macht.

Was steckt in der Restaurant-Vorlage von Wingo UI?

Die Restaurant Page ist eine einzige React-Komponente mit typisierten Beispielinhalten für Olive & Ember, ein fiktives Restaurant mit Holzofen in Chicago. Von oben nach unten:

• Hero mit Öffnungsstatus, Küche, Bewertung und zwei Buttons: „Reserve a table“ scrollt sanft zum Formular und setzt den Fokus hinein, „Order online“ verlinkt nach außen.
• Speisekarte mit Tabs für die Kategorien und Filter-Toggles für Ernährungsweisen in einer Leiste, die beim Scrollen durch die Gerichte unter dem Header kleben bleibt.
• Reservierungsformular mit Personenzahl, einem Date Picker, Zeitfenstern pro Service, Name, E-Mail, Telefon und Notizen, danach eine Bestätigung mit einer Kalenderdatei („Add to calendar“).
• Geschichte des Küchenchefs, Galerie mit einer bildschirmfüllenden Image Lightbox, Karten für private Events und Bewertungen.
• Anfahrt mit Adresse, „Get directions“, einem Anruf-Link, den Öffnungszeiten der Woche mit markiertem heutigen Tag und einer Location Map.
• Gutschein-Band und ein Footer. Auf dem Smartphone klebt eine Leiste „Reserve a table“ am unteren Rand, solange das Formular nicht zu sehen ist.

Es gibt drei Designs (design="warm" | "dark" | "minimal"), und jede Farbe, jeder Radius und jeder Abschnitt ist ein Prop. showGallery={false} oder showEvents={false} blendet einen Abschnitt aus; tone und ctaTone stellen die Akzente und die Reserve-Buttons von neutral auf deine Markenfarbe um.

Wie installierst du sie in einer Next.js-App?

Ein CLI-Befehl reicht, solange du mit einem Pro-Konto angemeldet bist. Die Vorlage ist Pro, und die CLI kopiert sie mit jeder Komponente, die sie importiert:

npx wingo-ui@latest add restaurant-page

Du bekommst components/templates/restaurant-page.tsx und components/templates/restaurant-page-data.ts, dazu die Komponenten, auf denen sie aufbaut (Tabs, Toggle Group, Date Picker, Time Picker, Lightbox, Karte, Sticky Bar), in components/ui/ sowie Marketing-Header, Footer und Sections in components/blocks/. Die Datendatei enthält die Typen und die Beispielinhalte. Leg deine eigenen Inhalte in eine separate Datei und gib sie als Props weiter, wie in den Beispielen unten: Die Dateien der Vorlage bleiben so, wie sie installiert wurden, und npx wingo-ui@latest update muss weniger Änderungen zusammenführen.

Wie funktioniert der Status „jetzt geöffnet“?

Du übergibst die Öffnungszeiten der Woche und die IANA-Zeitzone des Restaurants; die Seite berechnet den Status nach der Hydration in dieser Zone und aktualisiert ihn jede Minute. Die Öffnungszeiten sind eine Liste von Wochentagen, jeder mit null oder mehr Services im 24-Stunden-Format:

// app/restaurant/content.ts
import type { RestaurantDayHours, RestaurantInfo } from "@/components/templates/restaurant-page-data"

export const INFO: RestaurantInfo = {
  name: "Harbor Table",
  cuisine: "Fisch, Meeresfrüchte und Raw Bar",
  priceRange: "$$",
  street: "212 Water St",
  city: "New York, NY 10038",
  neighborhood: "South Street Seaport",
  phone: "(212) 555-0172",
  email: "hello@harbortable.com",
  point: { lat: 40.7069, lng: -74.0031 },
}

export const HOURS: RestaurantDayHours[] = [
  { day: 0, ranges: [{ label: "Brunch", open: "10:00", close: "15:00" }] },
  { day: 1, ranges: [] }, // montags geschlossen
  { day: 2, ranges: [{ label: "Abendessen", open: "17:00", close: "22:00" }] },
  { day: 3, ranges: [{ label: "Abendessen", open: "17:00", close: "22:00" }] },
  { day: 4, ranges: [{ label: "Abendessen", open: "17:00", close: "23:00" }] },
  // endet ein Service vor seinem Beginn, läuft er über Mitternacht
  { day: 5, ranges: [{ label: "Abendessen", open: "17:00", close: "01:00" }] },
  { day: 6, ranges: [{ label: "Abendessen", open: "17:00", close: "01:00" }] },
]

Die Seite liest die aktuelle Minute mit Intl.DateTimeFormat in der timeZone, die du übergibst (ein IANA-Name wie America/New_York). Ein Gast in Los Angeles, der ein Restaurant in New York aufruft, sieht also den Status von New York. In den letzten 60 Minuten vor Schluss wird aus der Zeile „Closing soon“. Ein Freitagsservice, der um 01:00 endet, zählt am Samstag um 00:30 noch als geöffnet.

Der Live-Status wird nach der Hydration gelesen und jede Minute aktualisiert. Der Server rendert stattdessen labels.hoursFallback („Dinner Tuesday to Sunday from 5 PM“ im Beispiel). So widerspricht das HTML nie dem Client, und Crawler bekommen trotzdem einen Satz zu deinen Öffnungszeiten. Setz dieses Label für dein Restaurant. Für Screenshots und Tests übergibst du ein festes now.

Dieselben Öffnungszeiten steuern drei weitere Stellen: die Tabelle im Abschnitt Anfahrt, die geschlossenen Tage im Kalender und die Zeitfenster im Formular.

Wie funktioniert die Speisekarte in React?

Eine Speisekarte als React-Komponente braucht zwei Dinge von dir: Kategorien, aus denen Tabs werden, und Gerichte, jedes mit seiner Kategorie und seinen Tags für Ernährungsweisen:

import type { RestaurantMenuCategory, RestaurantMenuItem } from "@/components/templates/restaurant-page-data"

export const CATEGORIES: RestaurantMenuCategory[] = [
  { id: "raw", label: "Raw Bar", description: "Frisch auf Bestellung geöffnet." },
  { id: "mains", label: "Hauptgerichte" },
  { id: "wine", label: "Wein" },
]

export const MENU: RestaurantMenuItem[] = [
  { id: "oysters", category: "raw", name: "Austern von der Ostküste", description: "Ein halbes Dutzend, mit Mignonette.", price: 21, tags: ["gluten-free"], highlight: "Empfehlung des Küchenchefs" },
  { id: "chowder", category: "mains", name: "Clam Chowder", price: 14, soldOut: true },
  { id: "muscadet", category: "wine", name: "Muscadet, Loire", price: 0, variants: [{ label: "Glas", price: 13 }, { label: "Flasche", price: 52 }] },
]

Die Tag-IDs vegan, vegetarian, gluten-free und spicy bekommen gezeichnete Icons; eigene ergänzt du über dietaryTags, ein leeres Array blendet die Filter aus. Filter kombinieren sich (Vegan und Spicy heißt: Gerichte mit beidem), die Tabs zeigen dann, wie viele Gerichte passen, und ein leerer Abschnitt bietet „Clear filters“ an statt eines leeren Panels. Die Pfeiltasten wechseln zwischen den Tabs. Auf dem Smartphone werden Tabs und Filter zu Chip-Reihen zum Wischen, und die Gerichte stehen in einer Spalte untereinander. variants ersetzen bei Weinen den Preis, und currency plus locale formatieren jeden Preis mit Intl.NumberFormat.

Wie funktioniert die Tischreservierung?

Das Formular bietet nur Zeiten an, zu denen das Restaurant Gäste platzieren kann, und zwei Props verbinden es mit deinem Buchungssystem. Es erzeugt pro Service alle timeStep Minuten einen Zeit-Chip (standardmäßig 30) und hört lastSeating Minuten vor Schluss auf (standardmäßig 60). Zeiten von heute, die innerhalb von minNotice liegen (30 Minuten), werden ausgeblendet, der Kalender reicht bookingWindow Tage voraus (60), und der nächste buchbare Tag ist vorausgewählt. Auf dem Smartphone öffnet der Date Picker ein Bottom Sheet.

isBooked(date, time) streicht vergebene Zeiten durch, und onReserve bekommt die Reservierung, sobald das Formular die Validierung besteht (ein Datum, eine Uhrzeit, ein Name und eine gültige E-Mail). So sieht die Verdrahtung in einem App-Router-Projekt aus:

// app/actions.ts
"use server"

import type { RestaurantReservation } from "@/components/templates/restaurant-page"

export async function reserveTable(reservation: RestaurantReservation) {
  // den Slot hier erneut prüfen: Seit dem Laden der Seite kann ihn ein anderer Gast genommen haben
  const response = await fetch(`${process.env.BOOKING_API_URL}/reservations`, {
    method: "POST",
    headers: { "content-type": "application/json" },
    body: JSON.stringify(reservation),
  })
  if (!response.ok) throw new Error("Buchung fehlgeschlagen")
  const { id } = (await response.json()) as { id: string }
  return { confirmation: id }
}

// app/restaurant-home.tsx
"use client"

import Link from "next/link"
import { RestaurantPage } from "@/components/templates/restaurant-page"
import { reserveTable } from "@/app/actions"
import { CATEGORIES, HOURS, INFO, MENU } from "@/app/restaurant/content"

export function RestaurantHome({ taken }: { taken: string[] }) {
  const booked = new Set(taken) // "2026-11-13 19:30"
  return (
    <RestaurantPage
      linkComponent={Link}
      restaurant={INFO}
      hours={HOURS}
      categories={CATEGORIES}
      menu={MENU}
      timeZone="America/New_York"
      partySizeMax={8}
      isBooked={(date, time) => booked.has(`${date} ${time}`)}
      onReserve={reserveTable}
      labels={{ hoursFallback: "Abendessen Dienstag bis Samstag ab 17 Uhr, sonntags Brunch" }}
    />
  )
}

Solange das Promise läuft, dreht sich ein Spinner im Button. Ein aufgelöstes { confirmation } zeigt deine Nummer mit Datum, Uhrzeit und Gästen; eine Ablehnung lässt jedes Feld ausgefüllt und zeigt labels.reserveFailed. Gruppen, die größer als partySizeMax sind, werden auf den Link für private Events verwiesen. Nutzt du schon einen Buchungsdienst mit eigenem Widget, setz showReservation={false} und leg einen Link dorthin in headerProps.actions: Die Reserve-Buttons und die Sticky Bar verschwinden mit dem Formular.

Wie kommen die Öffnungszeiten in die Suchergebnisse?

Ergänz in deiner Route JSON-LD vom Typ Restaurant mit openingHoursSpecification, gebaut aus demselben HOURS-Array. Die Vorlage gibt selbst keine strukturierten Daten aus, denn nur deine Route kennt deine kanonische URL. Next.js empfiehlt ein JSON-LD-Script in der Page-Komponente (Next.js-Guide zu JSON-LD (opens in a new tab)). Baust du es aus HOURS, laufen Seite und Markup nicht auseinander:

// app/page.tsx
import { RestaurantHome } from "@/app/restaurant-home"
import { HOURS, INFO } from "@/app/restaurant/content"

const DAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

export default async function Page() {
  const taken: string[] = [] // belegte Zeiten aus deiner Buchungs-API laden
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Restaurant",
    name: INFO.name,
    servesCuisine: INFO.cuisine,
    telephone: INFO.phone,
    acceptsReservations: true,
    priceRange: INFO.priceRange,
    // INFO.city ist Anzeigetext ("New York, NY 10038"), deshalb hier aufteilen
    address: { "@type": "PostalAddress", streetAddress: INFO.street, addressLocality: "New York", addressRegion: "NY", postalCode: "10038", addressCountry: "US" },
    openingHoursSpecification: HOURS.flatMap((day) =>
      day.ranges.map((range) => ({ "@type": "OpeningHoursSpecification", dayOfWeek: DAYS[day.day], opens: range.open, closes: range.close })),
    ),
  }
  return (
    <>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd).replace(/</g, "\\u003c") }} />
      <RestaurantHome taken={taken} />
    </>
  )
}

Halte die Öffnungszeiten in deinem Google-Unternehmensprofil mit denselben Daten synchron. Gäste glauben der Angabe, die sie zuerst sehen. Unser Guide zu JSON-LD in Next.js macht aus diesem Script eine typisierte Komponente mit einem CI-Check, der fehlschlägt, sobald das Markup von der Seite abweicht.

Was macht sie auf dem Smartphone?

Sie hält die drei Antworten auf einem 390px breiten Bildschirm in Daumenreichweite, denn wer Öffnungszeiten nachschaut, ist oft mit dem Smartphone unterwegs zum Restaurant. Im Einzelnen:

• Der Öffnungsstatus steht im Hero, ohne Scrollen sichtbar, in einer Live-Region, damit Screenreader ihn vorlesen.
• Tabs und Filter der Speisekarte sind Chip-Reihen zum Wischen, und die Leiste klebt unter dem Header, damit die Filter in Reichweite bleiben.
• Der Kalender ist ein Bottom Sheet, Zeit-Chips sind auf Touchscreens mindestens 44px hoch, und vergebene Zeiten werden als vergeben angesagt.
• Beim Absenden springt der Fokus ins erste Feld mit einem Problem.
• Die Lightbox der Galerie öffnet sich aus dem angetippten Foto; wisch zwischen den Fotos, zoom mit zwei Fingern und zieh nach unten, um sie zu schließen.

• Die Karte fängt auf Touchscreens nicht das Scrollen der Seite ab: Ein Tipp öffnet sie im Vollbild.
• Die klebende Leiste „Reserve a table“ respektiert die Safe Area und verschwindet, solange das Formular zu sehen ist.

Worauf solltest du achten?

Fünf Dinge, die das Beispiel nicht für dich entscheiden kann. Jedes rächt sich beim Launch, wenn du es auslässt:

• Beispieltexte in den Labels. Einige Standard-Labels beschreiben das Beispielrestaurant: home, ctaTitle und legal nennen Olive & Ember, visitTitle und tagline nennen Fulton Market, und heroTitle spricht von einem Eichenholzfeuer. Geh DEFAULT_RESTAURANT_PAGE_LABELS durch und setz deine eigenen über labels.
• Feiertage. Der Kalender sperrt Wochentage ohne Öffnungszeiten. datePickerProps.disabled ersetzt diese Regel, nimm den geschlossenen Wochentag also mit auf: disabled: [{ dayOfWeek: [1] }, new Date(2026, 11, 25)].
• Doppelbuchungen. isBooked ist ein Hinweis, der beim Laden der Seite entstanden ist. Prüf die Verfügbarkeit in der Server Action noch einmal.
• Karten-Tiles. Die Karte nutzt standardmäßig Tiles von OpenStreetMap. Für eine viel besuchte Seite lies die Tile Usage Policy von OSM (opens in a new tab) und setz mapProps={{ tileUrl }} auf deinen eigenen Anbieter.
• Echte Fotos. Ohne heroImage und src-Werte in der Galerie zeichnet die Seite ihre Bilder im Code. Für einen Prototyp reicht das, für den Launch nie.

Wie schneidet sie gegen andere Restaurant-Vorlagen ab?

Die meisten Alternativen sind Marketplace-Themes und CMS-Starter: Das lieferten Suchen wie „restaurant website template react“ und „nextjs restaurant website“, als wir am 6. November 2026 nachgesehen haben. Die Tabelle zeigt die Angebote, die dabei vorn lagen, jeweils mit dem, was die Angebotsseite selbst angibt:

Nimm Maison oder den BCMS-Starter, wenn das Restaurant die Speisekarte ohne Entwickler in einem CMS pflegen soll: Das Content-Modell ist dort schon fertig. Die Vorlage von Wingo UI nimmt einfache Props, ein CMS schließt du also selbst an. Nimm ein ThemeForest-Theme, wenn du einen günstigen, einmaligen Look willst und die Logik für Öffnungszeiten und Buchung selbst baust. Die Seite von Wingo UI passt, wenn dir Buchung und das Erlebnis auf dem Smartphone wichtiger sind als ein CMS und du schon andere Screens mit der Bibliothek baust. Verkauft das Restaurant auch Produkte online, nutzt die Storefront Page dasselbe System aus Header, Footer und Bändern.

Wie geht es weiter?

Probier die Demo auf der Vorlage Restaurant Page aus: Wechsel im Playground Design, Zeitzone und Uhrzeit, und installier sie mit npx wingo-ui@latest add restaurant-page, sobald du Pro hast. Die Zeitzonen-Rechnung hinter den Buchungs-Slots erklärt unser Guide zur Terminbuchung in React, und weitere Screens, die so gebaut sind, findest du in der Kategorie Praxis: Screens und Apps.

Häufige Fragen

Gibt es eine kostenlose Restaurant-Vorlage für Next.js?

Ja. Das Next.js Restaurant Template von bloomtpl auf GitHub (Next.js 16, Tailwind CSS 4, eine Reservierungsseite) ist für private und kommerzielle Projekte kostenlos, darf aber nicht weiterverkauft werden (Stand 6. November 2026); prüf bei jedem kostenlosen Starter die Lizenz, den letzten Commit und ob das Buchungsformular überhaupt etwas abschickt, bevor du darauf aufbaust. Die Restaurant Page von Wingo UI ist Pro, die Tabs und der Button darin sind kostenlos.

Wie zeige ich in Next.js an, ob ein Restaurant gerade geöffnet hat?

Speichere die Öffnungszeiten pro Wochentag im 24-Stunden-Format, lies die aktuelle Uhrzeit mit Intl.DateTimeFormat in der IANA-Zeitzone des Restaurants und rendere den Status erst nach der Hydration, damit Server und Client dasselbe zeigen. Die Restaurant Page macht das mit ihren Props hours und timeZone und aktualisiert die Zeile jede Minute.

Kann die Vorlage echte Reservierungen annehmen?

Ja, über onReserve. Der Callback bekommt Datum, Uhrzeit, Personenzahl, Name, E-Mail, Telefon und Notizen; gib ein Promise zurück, das mit deiner Bestätigungsnummer auflöst, oder lehne es ab, dann bleibt das Formular ausgefüllt und zeigt einen Fehler. Mit isBooked streichst du vergebene Zeiten durch, und auf dem Server prüfst du den Slot noch einmal.

Sollte eine Speisekarte ein PDF oder eine Webseite sein?

Eine Webseite. HTML-Text bricht auf dem Smartphone sauber um, Suchmaschinen und KI-Assistenten können ihn lesen, und Gäste können nach veganen oder glutenfreien Gerichten filtern. Ein PDF behältst du höchstens als optionalen Download zum Ausdrucken.

Was kostet die Restaurant-Vorlage von Wingo UI?

Sie gehört zu Wingo UI Pro: $8 im Monat, $80 im Jahr oder einmalig $150, alle anderen Pro-Vorlagen und -Komponenten inklusive. Die Rückerstattung innerhalb von 14 Tagen gilt nur, solange kein Pro-Item heruntergeladen wurde.