Skip to main content
Crave storefront templates are standard Next.js apps. Deploy them anywhere that supports Node.js or static hosting. This guide covers Vercel (recommended), Netlify, and custom setups.

Environment variables

Before deploying, make sure these variables are set in your hosting platform’s environment settings:
VariableRequiredDescription
NEXT_PUBLIC_CRAVEUP_API_KEYYesProduction API key from the Dashboard
NEXT_PUBLIC_LOCATION_IDYesLocation ID to serve
NEXT_PUBLIC_LOCATION_SLUGYesLocation slug for merchant lookups
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEYYesStripe publishable key for payments
CRAVEUP_WEBHOOK_SECRETIf using webhooksSecret for verifying webhook signatures
Use production API keys (sk_live_...) for your production deployment. Test keys (sk_test_...) do not create real orders.

Deploy to Vercel

Vercel is the recommended platform for Next.js storefronts. It provides edge caching, serverless functions, and preview deployments.
1

Push to Git

Push your storefront to a GitHub, GitLab, or Bitbucket repository.
2

Import in Vercel

Go to vercel.com/new, import your repository, and select the Next.js framework preset.
3

Set environment variables

Add your production environment variables in the Vercel project settings.
4

Deploy

Vercel builds and deploys automatically on every push to your main branch.
Or deploy from the CLI:

Custom domain

Add your domain in Vercel’s project settings under Domains. For a branded storefront, use a subdomain:

Deploy to Netlify

Set environment variables in the Netlify dashboard under Site settings > Environment variables.
Netlify requires the @netlify/plugin-nextjs plugin for full Next.js support. Add it in your netlify.toml or install via the Netlify dashboard.

Custom hosting

For Docker, VPS, or other setups, build and start the Next.js production server:

Docker

Enable standalone output in your Next.js config:

Performance checklist

After deploying, verify these optimizations:
  • Images: Product images should be served through next/image for automatic optimization
  • Caching: Location and menu data changes infrequently — cache it with revalidate in server components
  • Bundle size: Run npx next build and check the output for large pages (aim for < 100kB first load JS)
  • Core Web Vitals: Test with PageSpeed Insights — aim for all green scores

Monitor in production

Track API errors and storefront health:

Next steps

Analytics

Track storefront events and funnel performance.

Webhooks

Receive real-time order lifecycle notifications.