# Next.js Restaurant Website Vorlage: Menü und Reservierung > Eine Restaurant Website Vorlage für Next.js, die drei Fragen beantwortet: Habt ihr offen, was gibt es zu essen, ist ein Tisch frei? Mit Live-Status und Buchung. - 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: 11 Min. - Kanonische URL: https://wingo-ui.com/de/blog/nextjs-restaurant-template - Englische Fassung: https://wingo-ui.com/blog/nextjs-restaurant-template ## Kurz gesagt Eine gute Restaurant Website Vorlage für Next.js beantwortet die drei Fragen, für die Gäste sonst anrufen: Ist gerade geöffnet, was steht auf der Speisekarte, und bekomme ich einen Tisch? Die Restaurant Page von Wingo UI erledigt das mit einem Öffnungsstatus in der Zeitzone des Restaurants, einer Speisekarte mit Tabs und Filtern für Ernährungsweisen, einem Buchungsformular mit echten Zeitfenstern und einem onReserve-Callback, dazu Galerie, private Events und Karte. Sie ist eine Pro-Vorlage, die du als Quellcode installierst und mit deinen eigenen Öffnungszeiten, deiner Speisekarte und deiner Buchungs-API fütterst. 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](https://wingo-ui.com/templates/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](https://wingo-ui.com/components/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](https://wingo-ui.com/components/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](https://wingo-ui.com/components/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. > Live-Demo (Restaurant Page): Wähl Vegan, dann Gluten free: Die Filter kombinieren sich, und jeder Tab zeigt, wie viele Gerichte noch passen. Drück dann Reserve a table, wähl ein Datum und achte auf die durchgestrichenen Zeiten um 19 Uhr. Probier sie unter [Restaurant Page](https://wingo-ui.com/templates/restaurant-page) aus und installier sie mit `npx wingo-ui@latest add restaurant-page`. 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: ```bash 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: ```ts // 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: ```ts 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: ```tsx // 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 } } ``` ```tsx // 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 ( 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](https://nextjs.org/docs/app/guides/json-ld)). Baust du es aus `HOURS`, laufen Seite und Markup nicht auseinander: ```tsx // 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 ( <>