Skip to main content

​
Overview

The Incidents web dashboard is built with Next.js 16 and can be deployed to various hosting platforms. This guide covers deployment to Vercel, the recommended platform for Next.js applications.

​
Prerequisites

  • Node.js 20+ installed
  • Git repository for your project
  • Vercel account (or alternative hosting platform)
  • Supabase project configured

​
Local Development

1

Navigate to web directory

cd web
2

Install dependencies

npm install
3

Configure environment variables

Create a .env.local file in the web directory:
.env.local
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
Never commit .env.local to version control. It’s already in .gitignore.
4

Start development server

npm run dev
Open http://localhost:3000 in your browser.

​
Building for Production

Test the production build locally before deploying: 
npm run build
The build process compiles TypeScript, optimizes assets, and generates static pages where possible.

​
Deploying to Vercel

Vercel provides zero-configuration deployment for Next.js apps.

​
Method 1: Deploy with Vercel CLI

1

Install Vercel CLI

npm install -g vercel
2

Login to Vercel

vercel login
3

Deploy

From the web directory:
vercel
Follow the prompts to configure your project.
4

Deploy to production

vercel --prod

​
Method 2: Deploy with GitHub Integration

1

Push to GitHub

Ensure your code is pushed to a GitHub repository.
2

Import to Vercel

  1. Visit vercel.com/new
  2. Import your GitHub repository
  3. Configure project settings
3

Configure build settings

Vercel auto-detects Next.js projects. Set the root directory to web if needed:
  • Framework Preset: Next.js
  • Root Directory: web
  • Build Command: npm run build
  • Output Directory: .next
4

Add environment variables

In Vercel project settings, add:
  • NEXT_PUBLIC_SUPABASE_URL
  • NEXT_PUBLIC_SUPABASE_ANON_KEY
See Environment Variables for details.
5

Deploy

Click “Deploy” and Vercel will build and deploy your app.
With GitHub integration, Vercel automatically deploys on every push to your main branch.

​
Alternative Hosting Platforms

​
Netlify

1

Create netlify.toml

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

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

Connect repository

Import your repository in the Netlify dashboard.
3

Configure environment variables

Add Supabase environment variables in Netlify settings.

​
Self-Hosted with Docker

Create a Dockerfile in the web directory:
web/Dockerfile
FROM node:20-alpine AS builder

WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
WORKDIR /app

ENV NODE_ENV production

COPY --from=builder /app/public ./public
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static

EXPOSE 3000

ENV PORT 3000

CMD ["node", "server.js"]
Build and run: 
docker build -t incidents-web .
docker run -p 3000:3000 -e NEXT_PUBLIC_SUPABASE_URL=your_url incidents-web
For Docker deployment, enable standalone output in next.config.ts:
const nextConfig = {
  output: 'standalone',
};

​
Environment Configuration

The web app uses environment variables for configuration. All client-side variables must be prefixed with NEXT_PUBLIC_.

​
Required Variables

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

​
Client vs Server Variables

import { createBrowserClient } from "@supabase/ssr";

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

export const supabase = createBrowserClient(supabaseUrl, supabaseAnonKey);

​
Performance Optimization

​
Enable Caching

Configure caching headers for static assets:
next.config.ts
const nextConfig = {
  async headers() {
    return [
      {
        source: '/static/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
    ];
  },
};

​
Image Optimization

Next.js automatically optimizes images. Configure external image domains:
next.config.ts
const nextConfig = {
  images: {
    domains: ['your-project.supabase.co'],
  },
};

​
Monitoring and Analytics

​
Vercel Analytics

Add Vercel Analytics to track performance: 
npm install @vercel/analytics
app/layout.tsx
import { Analytics } from '@vercel/analytics/react';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

​
Continuous Deployment

With GitHub integration:
  1. Production: Pushes to main branch deploy to production
  2. Preview: Pull requests generate preview deployments
  3. Rollback: Easily rollback to previous deployments in Vercel dashboard

​
Branch Deployments

Configure branch-specific environment variables:
  • main branch → Production environment
  • staging branch → Staging environment
  • Feature branches → Preview environments

​
Troubleshooting

​
Build Errors

Type errors during build: 
npm run lint
Fix TypeScript errors before deploying. Missing environment variables: 
Error: Missing Supabase environment variables
Ensure all required variables are set in your hosting platform.

​
Runtime Errors

Supabase connection issues:
  • Verify environment variables are correctly set
  • Check Supabase project is not paused
  • Ensure anon key has correct permissions
404 errors on refresh: Next.js handles routing automatically. Ensure hosting platform supports Next.js rewrites.

​
Next Steps

Environment Variables

Configure all required environment variables

Supabase Setup

Set up and configure your Supabase backend

Build docs developers (and LLMs) love

Get started for freeTalk to us