Development

Deploy to Production

How to deploy Haze Dashboard to Vercel, Netlify, Cloudflare Pages, a Node.js server, or Docker.

Production Build

Before deploying, create an optimized production build:

npm run build

This generates a production-ready output in the .next/ directory. It contains the optimized server, client bundles, and prerendered HTML for static pages. Run npm run start to serve it locally.

Static Export

For fully static hosting, add output: 'export' to next.config.ts and re-run npm run build. The output lives in out/ and can be served from any CDN. Note that route handlers and server-side features are disabled in static export mode.

SSR vs Static: Trade-offs

Vercel

Vercel is built by the Next.js team and auto-detects everything automatically.

1. Push your repository to GitHub, GitLab, or Bitbucket.
2. Go to vercel.com/new and import your repository.
3. Vercel detects the Next.js framework — no configuration needed.
4. Click Deploy. Vercel runs the build and deploys.

Subsequent pushes to the main branch trigger automatic deployments. Pull request branches get preview URLs automatically.

Netlify

Netlify supports Next.js SSR via the official Next.js plugin.

1. Connect your repository at app.netlify.com.
2. Set the build configuration:

# netlify.toml
[build]
  command = "npm run build"
  publish = ".next"

[[plugins]]
  package = "@netlify/plugin-nextjs"

Cloudflare Pages

Cloudflare Pages supports Next.js via the @cloudflare/next-on-pages adapter for full SSR, or via static export for simpler sites.

1. Connect your repository in the Cloudflare dashboard under Workers & Pages.
2. Build command: npx @cloudflare/next-on-pages@1
3. Output directory: .vercel/output/static
4. For static export, use build command npm run build and output directory out.

Node.js Server

Run the production build directly on any server with Node.js 18+:

# Build
npm run build

# Start the production server
npm run start
# Or directly:
node node_modules/.bin/next start -p 3000

For long-running production servers, use PM2 as a process manager:

# Install PM2 globally
npm install -g pm2

# Start with PM2
pm2 start "npm run start" --name haze-dashboard

# Other PM2 commands
pm2 logs haze-dashboard    # View logs
pm2 restart haze-dashboard # Restart
pm2 stop haze-dashboard    # Stop
pm2 save                   # Save process list
pm2 startup                # Configure auto-start on system boot

The server runs on port 3000 by default. Use the PORT environment variable to change it.

Docker

Set output: 'standalone' in next.config.ts and create a Dockerfile at the project root:

FROM node:20-alpine AS deps
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci

FROM node:20-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build

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

ENV HOST=0.0.0.0
ENV PORT=3000
EXPOSE 3000
CMD ["node", "server.js"]

Build and run the container:

# Build the image
docker build -t haze-dashboard .

# Run the container
docker run -p 3000:3000 haze-dashboard

Environment Variables

Key environment variables for production deployments:

Next Steps

Check the Changelog for the latest updates and release notes.