Restaurant Website: Best Practices Guide 2025

// Reservierungs-Form Component
'use client'
 
import { useState } from 'react'
import { useForm } from 'react-hook-form'
 
export default function ReservierungsForm() {
  const { register, handleSubmit } = useForm()
  const [isSubmitting, setIsSubmitting] = useState(false)
 
  const onSubmit = async (data) => {
    setIsSubmitting(true)
 
    const response = await fetch('/api/reservierung', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    })
 
    if (response.ok) {
      // Bestätigung anzeigen
      alert('Reservierung erfolgreich! Sie erhalten eine Bestätigungs-E-Mail.')
    }
 
    setIsSubmitting(false)
  }
 
  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <input
        {...register('name', { required: true })}
        placeholder="Ihr Name"
        className="w-full rounded border px-4 py-2"
      />
 
      <input
        {...register('email', { required: true })}
        type="email"
        placeholder="E-Mail"
        className="w-full rounded border px-4 py-2"
      />
 
      <input
        {...register('phone', { required: true })}
        type="tel"
        placeholder="Telefon"
        className="w-full rounded border px-4 py-2"
      />
 
      <input
        {...register('date', { required: true })}
        type="date"
        className="w-full rounded border px-4 py-2"
      />
 
      <select {...register('time', { required: true })} className="w-full rounded border px-4 py-2">
        <option value="">Uhrzeit wählen</option>
        <option value="18:00">18:00 Uhr</option>
        <option value="18:30">18:30 Uhr</option>
        <option value="19:00">19:00 Uhr</option>
        <option value="19:30">19:30 Uhr</option>
        <option value="20:00">20:00 Uhr</option>
      </select>
 
      <select
        {...register('guests', { required: true })}
        className="w-full rounded border px-4 py-2"
      >
        <option value="">Personen</option>
        {[1, 2, 3, 4, 5, 6, 7, 8].map((n) => (
          <option key={n} value={n}>
            {n} {n === 1 ? 'Person' : 'Personen'}
          </option>
        ))}
      </select>
 
      <button
        type="submit"
        disabled={isSubmitting}
        className="bg-primary w-full rounded px-6 py-3 text-white"
      >
        {isSubmitting ? 'Wird gesendet...' : 'Jetzt reservieren'}
      </button>
    </form>
  )
}

// app/api/reservierung/route.js
import { sendEmail } from '@/lib/email'
 
export async function POST(request) {
  const reservation = await request.json()
 
  // In Datenbank speichern
  await saveReservation(reservation)
 
  // Bestätigungs-E-Mail senden
  await sendEmail({
    to: reservation.email,
    subject: 'Reservierung bestätigt - Restaurant Name',
    html: `
      <h1>Vielen Dank für Ihre Reservierung!</h1>
      <p>Wir freuen uns auf Ihren Besuch:</p>
      <ul>
        <li>Datum: ${reservation.date}</li>
        <li>Uhrzeit: ${reservation.time}</li>
        <li>Personen: ${reservation.guests}</li>
      </ul>
      <p>Bei Fragen erreichen Sie uns unter: 07931 123456</p>
    `,
  })
 
  return Response.json({ success: true })
}

// components/Speisekarte.jsx
const menuItems = [
  {
    id: 1,
    category: 'Vorspeisen',
    name: 'Carpaccio vom Rind',
    description: 'Hauchdünn geschnittenes Rinderfilet mit Rucola, Parmesan und Balsamico',
    price: 12.5,
    allergene: ['Gluten', 'Milch'],
    image: '/menu/carpaccio.jpg',
  },
  // Weitere Gerichte...
]
 
export default function Speisekarte() {
  return (
    <div className="mx-auto max-w-4xl px-4 py-8">
      <h1 className="mb-8 text-4xl font-bold">Unsere Speisekarte</h1>
 
      {Object.entries(groupByCategory(menuItems)).map(([category, items]) => (
        <section key={category} className="mb-12">
          <h2 className="mb-6 text-2xl font-semibold">{category}</h2>
 
          <div className="space-y-6">
            {items.map((item) => (
              <div key={item.id} className="flex items-start gap-4">
                {item.image && (
                  <img
                    src={item.image}
                    alt={item.name}
                    title={item.name}
                    className="h-24 w-24 rounded object-cover"
                  />
                )}
 
                <div className="flex-1">
                  <div className="flex items-start justify-between">
                    <h3 className="text-lg font-semibold">{item.name}</h3>
                    <span className="text-primary text-lg font-bold">
                      {item.price.toFixed(2)} €
                    </span>
                  </div>
 
                  <p className="mt-1 text-gray-600">{item.description}</p>
 
                  {item.allergene && (
                    <p className="mt-2 text-sm text-gray-500">
                      Allergene: {item.allergene.join(', ')}
                    </p>
                  )}
                </div>
              </div>
            ))}
          </div>
        </section>
      ))}
 
      <div className="mt-8 rounded bg-gray-100 p-4">
        <p className="text-sm text-gray-700">
          Informationen zu Allergenen und Zusatzstoffen erhalten Sie auf Anfrage.
        </p>
      </div>
    </div>
  )
}

// Responsive Navigation mit Click-to-Call
export default function MobileHeader() {
  return (
    <header className="sticky top-0 z-50 bg-white shadow-sm">
      <div className="container mx-auto px-4 py-3">
        <div className="flex items-center justify-between">
          <Logo />
 
          <div className="flex gap-2">
            {/* Click-to-Call */}
            <a
              href="tel:+497931123456"
              className="bg-primary flex items-center gap-2 rounded px-4 py-2 text-white"
            >
              <Phone size={18} />
              <span className="hidden sm:inline">Anrufen</span>
            </a>
 
            {/* Reservierung */}
            <a href="/reservierung" className="bg-secondary rounded px-4 py-2 text-white">
              Reservieren
            </a>
          </div>
        </div>
      </div>
    </header>
  )
}

export const metadata = {
  title: 'La Dolce Vita - Italienisches Restaurant Bad Mergentheim',
  description:
    'Authentische italienische Küche im Herzen von Bad Mergentheim. Täglich frische Pasta, Pizza aus dem Steinofen und hausgemachte Desserts. Jetzt Tisch reservieren!',
  keywords: [
    'italienisches restaurant bad mergentheim',
    'pizza bad mergentheim',
    'pasta restaurant',
    'tisch reservieren bad mergentheim',
  ],
}
 
export default function HomePage() {
  return (
    <>
      <h1>Italienisches Restaurant La Dolce Vita in Bad Mergentheim</h1>
 
      <p>
        Willkommen im La Dolce Vita - Ihrem italienischen Restaurant im Herzen von Bad Mergentheim.
        Genießen Sie authentische italienische Küche mit frischen Zutaten und traditionellen
        Rezepten aus der Toskana.
      </p>
 
      <section>
        <h2>Unsere Spezialitäten</h2>
        <p>
          Von Pizza aus dem original italienischen Steinofen über hausgemachte Pasta bis hin zu
          fangfrischem Fisch - in unserem Restaurant in Bad Mergentheim erleben Sie Italien pur.
        </p>
      </section>
    </>
  )
}

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Restaurant",
    "name": "La Dolce Vita",
    "image": "https://restaurant.de/images/hero.jpg",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "Hauptstraße 123",
      "addressLocality": "Bad Mergentheim",
      "postalCode": "97980",
      "addressCountry": "DE"
    },
    "geo": {
      "@type": "GeoCoordinates",
      "latitude": 49.4922,
      "longitude": 9.7736
    },
    "telephone": "+497931123456",
    "openingHours": ["Mo-Fr 11:30-14:00", "Mo-Fr 17:30-22:00", "Sa-So 11:30-22:00"],
    "servesCuisine": "Italienisch",
    "priceRange": "€€",
    "acceptsReservations": true,
    "menu": "https://restaurant.de/speisekarte"
  }
</script>

import Image from 'next/image'
;<Image
  src="/restaurant-interior.jpg"
  alt="Restaurant Innenraum"
  width={1200}
  height={800}
  sizes="(max-width: 768px) 100vw, 1200px"
  priority={false} // Lazy loading
/>