> ## Documentation Index
> Fetch the complete documentation index at: https://devperez08-platform-list-anime-54.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

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

***

## Prerequisites

Before deploying, ensure you have:

<Steps>
  <Step title="Supabase Project">
    A configured Supabase project with the database schema and RLS policies
  </Step>

  <Step title="GitHub Repository">
    Your code pushed to a GitHub repository
  </Step>

  <Step title="Vercel Account">
    A free or paid Vercel account (sign up at [vercel.com](https://vercel.com))
  </Step>

  <Step title="Environment Variables">
    Your Supabase URL and anon key ready
  </Step>
</Steps>

***

## Deployment Methods

### Method 1: Deploy with Vercel CLI (Recommended)

<Steps>
  <Step title="Install Vercel CLI">
    ```bash theme={null}
    npm install -g vercel
    ```
  </Step>

  <Step title="Login to Vercel">
    ```bash theme={null}
    vercel login
    ```

    Follow the prompts to authenticate.
  </Step>

  <Step title="Deploy from project root">
    ```bash theme={null}
    vercel
    ```

    The CLI will:

    * Link your project to Vercel
    * Detect Next.js framework
    * Create a preview deployment
  </Step>

  <Step title="Add environment variables">
    ```bash theme={null}
    vercel env add NEXT_PUBLIC_SUPABASE_URL production
    vercel env add NEXT_PUBLIC_SUPABASE_ANON_KEY production
    ```

    Paste your values when prompted.
  </Step>

  <Step title="Deploy to production">
    ```bash theme={null}
    vercel --prod
    ```

    This creates a production deployment with your environment variables.
  </Step>
</Steps>

<Tip>
  Use `vercel env pull` to download environment variables to your local `.env.local` file for testing.
</Tip>

***

### Method 2: Deploy via Vercel Dashboard

<Steps>
  <Step title="Import Git Repository">
    1. Go to [vercel.com/new](https://vercel.com/new)
    2. Select "Import Git Repository"
    3. Choose your GitHub repository
    4. Click "Import"
  </Step>

  <Step title="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)
  </Step>

  <Step title="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 |
  </Step>

  <Step title="Deploy">
    Click "Deploy" and wait for the build to complete (\~2-3 minutes).
  </Step>
</Steps>

***

## Build Configuration

### Next.js Build Settings

The project uses default Next.js 15 build configuration:

```json package.json theme={null}
{
  "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

<Steps>
  <Step title="Add Domain in Vercel">
    1. Vercel Dashboard → Project → Settings → Domains
    2. Click "Add Domain"
    3. Enter your domain (e.g., `epineko.com`)
  </Step>

  <Step title="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](http://www.epineko.com)):

    ```
    Type: CNAME
    Name: www
    Value: cname.vercel-dns.com
    ```
  </Step>

  <Step title="Wait for DNS Propagation">
    DNS changes can take 24-48 hours to propagate globally.
    Vercel will automatically issue SSL certificate once DNS is configured.
  </Step>

  <Step title="Update Supabase URLs">
    Add your custom domain to Supabase:

    * Site URL: `https://epineko.com`
    * Redirect URLs: `https://epineko.com/**`
  </Step>
</Steps>

***

## Database Migrations

### Initial Schema Deployment

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

```sql theme={null}
-- 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:

```sql theme={null}
-- 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:

```typescript theme={null}
// 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:

```typescript next.config.ts theme={null}
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:

<Steps>
  <Step title="Enable in Dashboard">
    Vercel Dashboard → Project → Analytics → Enable
  </Step>

  <Step title="View Metrics">
    Monitor:

    * Page views
    * Unique visitors
    * Performance scores
    * Geographic distribution
  </Step>
</Steps>

### Error Tracking

Implement error boundaries in production:

```tsx src/app/error.tsx theme={null}
'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

```mermaid theme={null}
graph LR
    A[Push to GitHub] --> B{Branch?}
    B -->|main| C[Production Deploy]
    B -->|feature| D[Preview Deploy]
    C --> E[Run Tests]
    D --> E
    E --> F{Tests Pass?}
    F -->|Yes| G[Deploy Success]
    F -->|No| H[Deploy Failed]
```

### Rollback Strategy

If a deployment fails or has issues:

<Steps>
  <Step title="Access Deployments">
    Vercel Dashboard → Project → Deployments
  </Step>

  <Step title="Select Previous Version">
    Click on the last working deployment
  </Step>

  <Step title="Promote to Production">
    Click "Promote to Production"
  </Step>
</Steps>

***

## Troubleshooting

<Accordion title="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
</Accordion>

<Accordion title="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/**`
</Accordion>

<Accordion title="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
</Accordion>

<Accordion title="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
</Accordion>

***

## 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:

<CardGroup cols={2}>
  <Card title="Connection Pooling" icon="server">
    Supabase includes built-in connection pooling
  </Card>

  <Card title="Database Indexes" icon="gauge-high">
    Add indexes on frequently queried columns
  </Card>

  <Card title="Read Replicas" icon="clone">
    Use Supabase Pro for read replicas
  </Card>

  <Card title="Caching Layer" icon="bolt">
    Implement Redis for session storage
  </Card>
</CardGroup>

### 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

<CardGroup cols={3}>
  <Card title="Environment Variables" icon="key" href="/development/environment-variables">
    Configure secrets properly
  </Card>

  <Card title="Project Structure" icon="folder-tree" href="/development/project-structure">
    Understand the codebase
  </Card>

  <Card title="Supabase Setup" icon="database" href="/integration/supabase">
    Initial database configuration
  </Card>
</CardGroup>