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:
| Variable | Required | Description |
|---|
NEXT_PUBLIC_CRAVEUP_API_KEY | Yes | Production API key from the Dashboard |
NEXT_PUBLIC_LOCATION_ID | Yes | Location ID to serve |
NEXT_PUBLIC_LOCATION_SLUG | Yes | Location slug for merchant lookups |
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY | Yes | Stripe publishable key for payments |
CRAVEUP_WEBHOOK_SECRET | If using webhooks | Secret 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.
Push to Git
Push your storefront to a GitHub, GitLab, or Bitbucket repository.
Import in Vercel
Go to vercel.com/new, import your repository, and select the Next.js framework preset. Set environment variables
Add your production environment variables in the Vercel project settings.
Deploy
Vercel builds and deploys automatically on every push to your main branch.
Custom domain
Add your domain in Vercel’s project settings under Domains. For a branded storefront, use a subdomain:
Deploy to Netlify
# Install the Netlify CLI
npm install -g netlify-cli
# Build and deploy
netlify deploy --prod --dir=.next
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"]
const nextConfig = {
output: 'standalone',
};
export default nextConfig;
- 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
