Deployment Guide

Deploy EpiNeko to production with Vercel and Supabase

Overview

EpiNeko is optimized for deployment on Vercel with a Supabase backend. This guide covers the complete deployment process from local development to production.

This guide assumes you have already set up your Supabase project and configured environment variables locally.

---

Prerequisites

Before deploying, ensure you have:

1. Supabase Project

   A configured Supabase project with the database schema and RLS policies

2. GitHub Repository

   Your code pushed to a GitHub repository

3. Vercel Account

   A free or paid Vercel account (sign up at vercel.com)

4. Environment Variables

   Your Supabase URL and anon key ready

---

Deployment Methods

Method 1: Deploy with Vercel CLI (Recommended)

1. Install Vercel CLI

   npm install -g vercel
   
2. Login to Vercel

   vercel login
   

   Follow the prompts to authenticate.

3. Deploy from project root

   vercel
   

   The CLI will:

   • Link your project to Vercel
   • Detect Next.js framework
   • Create a preview deployment
4. Add environment variables

   vercel env add NEXT_PUBLIC_SUPABASE_URL production
   vercel env add NEXT_PUBLIC_SUPABASE_ANON_KEY production
   

   Paste your values when prompted.

5. Deploy to production

   vercel --prod
   

   This creates a production deployment with your environment variables.

Use vercel env pull to download environment variables to your local .env.local file for testing.

---

Method 2: Deploy via Vercel Dashboard

1. Import Git Repository

   1. Go to vercel.com/new
   2. Select “Import Git Repository”
   3. Choose your GitHub repository
   4. Click “Import”
2. Configure Project

   • Framework Preset: Next.js (auto-detected)
   • Root Directory: ./ (default)
   • Build Command: next build (auto-detected)
   • Output Directory: .next (auto-detected)
   • Install Command: npm install (auto-detected)
3. Add Environment Variables

   In the “Environment Variables” section:

   Name	Value	Environments
   NEXT_PUBLIC_SUPABASE_URL	https://your-project.supabase.co	Production, Preview, Development
   NEXT_PUBLIC_SUPABASE_ANON_KEY	eyJhbGc...	Production, Preview, Development

4. Deploy

   Click “Deploy” and wait for the build to complete (~2-3 minutes).

---

Build Configuration

Next.js Build Settings

The project uses default Next.js 15 build configuration:

package.json

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint"
  }
}

Build Output

The build process:

1. Compiles TypeScript to JavaScript
2. Optimizes React components
3. Generates static pages where possible
4. Creates server-side rendered routes
5. Optimizes images and assets

Typical build output:

Route (app)                              Size     First Load JS
┌ ○ /                                    5.2 kB         95.8 kB
├ ○ /anime/[id]                          2.1 kB         92.7 kB
├ ○ /library                             4.8 kB         95.4 kB
├ ○ /login                               3.2 kB         93.8 kB
└ ○ /profile                             2.9 kB         93.5 kB

○  (Static)  prerendered as static content
λ  (Dynamic) server-rendered on demand

---

Environment-Specific Configuration

Production Environment

URL: Your custom domain or your-app.vercel.app

Environment Variables:

• Use your production Supabase project
• Enable production optimizations
• Configure custom domains

Supabase Configuration:

1. Go to Supabase Dashboard → Authentication → URL Configuration
2. Add your production URL to “Site URL”
3. Add to “Redirect URLs”: https://your-app.vercel.app/**

---

Preview Environment

URL: Automatically generated for each pull request

Purpose: Test changes before merging to main branch

Configuration:

• Uses same environment variables as production
• Separate database recommended for testing
• Automatic deployment on PR creation

Enable Preview Deployments:

1. Vercel Dashboard → Project Settings → Git
2. Enable “Automatic Deployments” for pull requests
3. Configure branch patterns if needed

---

Development Environment

URL: http://localhost:3000

Configuration:

• Uses .env.local file
• Hot module reloading enabled
• Development Supabase project recommended

---

Custom Domain Configuration

1. Add Domain in Vercel

   1. Vercel Dashboard → Project → Settings → Domains
   2. Click “Add Domain”
   3. Enter your domain (e.g., epineko.com)
2. Configure DNS

   Add these records to your DNS provider:

   For Apex Domain (epineko.com):

   Type: A
   Name: @
   Value: 76.76.21.21
   

   For Subdomain (www.epineko.com):

   Type: CNAME
   Name: www
   Value: cname.vercel-dns.com
   
3. Wait for DNS Propagation

   DNS changes can take 24-48 hours to propagate globally. Vercel will automatically issue SSL certificate once DNS is configured.

4. Update Supabase URLs

   Add your custom domain to Supabase:

   • Site URL: https://epineko.com
   • Redirect URLs: https://epineko.com/**

---

Database Migrations

Initial Schema Deployment

Your Supabase database should already have the schema from local development:

-- user_library table
CREATE TABLE user_library (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  user_id UUID REFERENCES auth.users NOT NULL,
  anime_id_jikan INTEGER NOT NULL,
  title TEXT NOT NULL,
  image_url TEXT,
  status TEXT NOT NULL,
  score INTEGER,
  episodes_watched INTEGER DEFAULT 0,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  UNIQUE(user_id, anime_id_jikan)
);

RLS Policies

Ensure Row Level Security policies are enabled:

-- Enable RLS
ALTER TABLE user_library ENABLE ROW LEVEL SECURITY;

-- Users can only see their own library
CREATE POLICY "Users can view own library" 
  ON user_library FOR SELECT 
  USING (auth.uid() = user_id);

-- Users can insert to their own library
CREATE POLICY "Users can insert to own library" 
  ON user_library FOR INSERT 
  WITH CHECK (auth.uid() = user_id);

-- Users can update their own library
CREATE POLICY "Users can update own library" 
  ON user_library FOR UPDATE 
  USING (auth.uid() = user_id);

-- Users can delete from their own library
CREATE POLICY "Users can delete from own library" 
  ON user_library FOR DELETE 
  USING (auth.uid() = user_id);

---

Performance Optimization

Caching Strategy

The application uses Next.js caching for external API calls:

// Short cache for frequently updated data
getTopAnime() // 1 hour cache

// Long cache for static data
getAnimeById() // 24 hour cache
getAnimeEpisodes() // 24 hour cache

Image Optimization

Next.js automatically optimizes images from MyAnimeList CDN:

next.config.ts

images: {
  remotePatterns: [
    {
      protocol: 'https',
      hostname: 'cdn.myanimelist.net',
      pathname: '/**',
    },
  ],
}

Benefits:

• Automatic WebP conversion
• Responsive image sizing
• Lazy loading
• CDN distribution

---

Monitoring and Analytics

Vercel Analytics

Enable Vercel Analytics for production insights:

1. Enable in Dashboard

   Vercel Dashboard → Project → Analytics → Enable

2. View Metrics

   Monitor:

   • Page views
   • Unique visitors
   • Performance scores
   • Geographic distribution

Error Tracking

Implement error boundaries in production:

src/app/error.tsx

'use client'

export default function Error({
  error,
  reset,
}: {
  error: Error
  reset: () => void
}) {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="text-center">
        <h2 className="text-2xl font-bold mb-4">Something went wrong!</h2>
        <button 
          onClick={reset}
          className="btn btn-primary"
        >
          Try again
        </button>
      </div>
    </div>
  )
}

---

Continuous Deployment

Automatic Deployments

Vercel automatically deploys when you push to GitHub:

Main Branch → Production Deployment Feature Branches → Preview Deployments Pull Requests → Preview Deployments

Deployment Workflow

Rollback Strategy

If a deployment fails or has issues:

1. Access Deployments

   Vercel Dashboard → Project → Deployments

2. Select Previous Version

   Click on the last working deployment

3. Promote to Production

   Click “Promote to Production”

---

Troubleshooting

Build Failed: Missing Environment Variables

Error: Error: Missing Supabase environment variables

Solution:

1. Verify variables are added in Vercel Dashboard
2. Check variable names match exactly
3. Ensure selected for correct environment
4. Redeploy after adding variables

Authentication Errors in Production

Error: Users can’t sign in or get redirected incorrectly

Solution:

1. Check Supabase Dashboard → Authentication → URL Configuration
2. Verify Site URL matches production URL
3. Add production URL to Redirect URLs
4. Include wildcard: https://your-app.vercel.app/**

Images Not Loading

Error: Anime posters show broken image icons

Solution:

1. Verify next.config.ts includes MyAnimeList CDN
2. Check remote patterns configuration
3. Ensure images array exists in config
4. Redeploy after config changes

API Rate Limit Errors

Error: Jikan API rate limit exceeded

Solution:

1. Implement request queuing
2. Increase cache duration
3. Use CDN for static content
4. Consider Jikan API premium tier

---

Post-Deployment Checklist

After deploying, verify these items:

• Application loads at production URL
• User registration works
• User login works
• Anime search returns results
• Adding to library works
• Episode tracking functions correctly
• Images load properly
• Mobile responsive design works
• Custom domain (if configured) resolves correctly
• SSL certificate is active
• No console errors in production
• Analytics tracking is active

---

Scaling Considerations

Database Scaling

As your user base grows:

Connection Pooling

Supabase includes built-in connection pooling

Database Indexes

Add indexes on frequently queried columns

Read Replicas

Use Supabase Pro for read replicas

Caching Layer

Implement Redis for session storage

Vercel Scaling

Vercel automatically scales based on traffic:

• Serverless Functions: Auto-scale per request
• Edge Network: Global CDN distribution
• DDoS Protection: Built-in protection
• No downtime deployments: Zero-downtime updates

---

Related Documentation

Environment Variables

Configure secrets properly

Project Structure

Understand the codebase

Supabase Setup

Initial database configuration