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: 
npx vercel --prod

​
Custom domain

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

​
Deploy to Netlify

# Install the Netlify CLI
npm install -g netlify-cli

# Build and deploy
netlify deploy --prod --dir=.next
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: 
# Build
pnpm build

# Start the production server
pnpm start -p 3000

​
Docker

FROM node:20-alpine AS builder
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN corepack enable && pnpm install --frozen-lockfile
COPY . .
RUN pnpm build

FROM node:20-alpine AS runner
WORKDIR /app
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
COPY --from=builder /app/public ./public

EXPOSE 3000
ENV PORT=3000
CMD ["node", "server.js"]
Enable standalone output in your Next.js config: 
const nextConfig = {
  output: 'standalone',
};

export default nextConfig;

​
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
// Cache merchant data for 5 minutes
export const revalidate = 300;

export default async function HomePage() {
  const merchant = await storefront.merchant.getBySlug('downtown-pizza');
  // ...
}

​
Monitor in production

Track API errors and storefront health: 
import { ApiError } from '@craveup/storefront-sdk';

try {
  await storefront.cart.get(locationId, cartId);
} catch (error) {
  if (error instanceof ApiError) {
    // Send to your error tracking service
    Sentry.captureException(error, {
      extra: { status: error.status, url: error.url },
    });
  }
}

​
Next steps

Analytics

Track storefront events and funnel performance.

Webhooks

Receive real-time order lifecycle notifications.