Add ordering to Next.js

nonnastable.com/order

Nonna's Table

MenuHoursVisit

Nonna's Table

Order online

Pickup Delivery

Margherita pizza

San Marzano, fior di latte, basil

$16.50 Add

Rigatoni alla vodka

Tomato cream, chili, pecorino

$18.00 Add

View order · 3 items

In Next.js, render the container div and load the script with next/script. App Router example:

import Script from 'next/script'

export default function OrderPage() {
  return (
    <>
      <div
        data-delitero-restaurant="rst_9f2a64d1-7c3e-4b8a-9d21-8e5f0a6c4b7e"
        style={{ height: 640, maxWidth: 480 }}
      >
        <a href="https://order.delitero.com/r/rst_9f2a64d1-7c3e-4b8a-9d21-8e5f0a6c4b7e">Order online</a>
      </div>
      <Script src="https://order.delitero.com/embed.js" strategy="afterInteractive" />
    </>
  )
}

The loader mounts every container it finds when it runs, and mounting is idempotent. One thing to know: on client-side navigation to a page whose container did not exist when the script first ran, mount it yourself:

useEffect(() => {
  const el = document.querySelector('[data-delitero-restaurant]')
  if (el) window.Delitero?.mount(el)
}, [])

The widget manages its own DOM inside a shadow root on the container div, so React does not try to reconcile it. Keep the div unkeyed, and keep the fallback link as its only child: it renders while the script loads (or if it is blocked) and the widget supersedes it on mount.

Works everywhere, or the link does

Whatever your website can or cannot embed, the hosted ordering page always works as a plain link. Sizing, isolation guarantees, and single-page-app notes are on the Add ordering to your site overview.