Skip to main content

​
Overview

EpiNeko requires environment variables for Supabase authentication and database connectivity. All variables must be configured before running the application.
Never commit .env.local or any file containing actual credentials to version control. Keep your secrets secure!

​
Required Variables

​
Supabase Configuration

Required: Yes
Type: Public
Description: Your Supabase project URL
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
Where to find it:
  1. Go to your Supabase Dashboard
  2. Select your project
  3. Navigate to Settings → API
  4. Copy the “Project URL”
The NEXT_PUBLIC_ prefix makes this variable accessible in client-side code.
Required: Yes
Type: Public
Description: Your Supabase anonymous/public API key
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
Where to find it:
  1. Go to your Supabase Dashboard
  2. Select your project
  3. Navigate to Settings → API
  4. Copy the “anon public” key under Project API keys
This key is safe to use in client-side code as it’s restricted by Row Level Security (RLS) policies.

​
Environment File Setup

​
Create .env.local

Create a .env.local file in the root of your project:
1

Create the file

touch .env.local
2

Add configuration

.env.local
# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here
3

Restart development server

npm run dev
Environment variables are loaded on server start.

​
Example Configuration

.env.local
# ==================================
# Supabase Configuration
# ==================================
NEXT_PUBLIC_SUPABASE_URL=https://xyzcompany.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inh5emNvbXBhbnkiLCJyb2xlIjoiYW5vbiIsImlhdCI6MTYxNTIxOTIwMywiZXhwIjoxOTMwNzk1MjAzfQ.example-key-do-not-use

​
Variable Usage in Code

​
Client-Side Usage

Variables prefixed with NEXT_PUBLIC_ are accessible in browser code:
src/utils/supabase/client.ts
export function createClient() {
  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
  const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

  if (!supabaseUrl || !supabaseKey) {
    throw new Error('Missing Supabase environment variables');
  }

  return createBrowserClient(supabaseUrl, supabaseKey);
}

​
Server-Side Usage

Server components and API routes can access all environment variables:
src/utils/supabase/server.ts
export async function createClient() {
  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        // Cookie configuration
      },
    }
  );
}

​
Middleware Usage

The middleware also accesses public environment variables:
src/utils/supabase/middleware.ts
const supabase = createServerClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
  {
    cookies: {
      // Cookie configuration
    },
  }
);

​
Validation

​
Runtime Validation

The application validates required environment variables at runtime: 
if (!supabaseUrl || !supabaseKey) {
  throw new Error(
    'Missing Supabase environment variables: ' +
    'NEXT_PUBLIC_SUPABASE_URL or NEXT_PUBLIC_SUPABASE_ANON_KEY'
  );
}

​
Check Before Starting

Verify your configuration before running the app: 
# Check if variables are set
echo $NEXT_PUBLIC_SUPABASE_URL
echo $NEXT_PUBLIC_SUPABASE_ANON_KEY

​
Deployment Configuration

​
Vercel

1

Navigate to project settings

Go to your Vercel project → Settings → Environment Variables
2

Add variables

Add each variable with appropriate values:
  • NEXT_PUBLIC_SUPABASE_URL
  • NEXT_PUBLIC_SUPABASE_ANON_KEY
3

Select environments

Choose which environments need the variables:
  • Production
  • Preview
  • Development
4

Redeploy

Trigger a new deployment for changes to take effect
Use different Supabase projects for production and development environments for better isolation.

​
Security Best Practices

Never Commit Secrets

Add .env.local to .gitignore

Use RLS Policies

Protect data with Row Level Security

Rotate Keys Regularly

Update API keys periodically

Environment Separation

Use different keys for dev/staging/prod

​
.gitignore Configuration

Ensure your .gitignore includes:
.gitignore
# Environment variables
.env
.env.local
.env.*.local
.env.development.local
.env.test.local
.env.production.local

​
Troubleshooting

Cause: Environment variables are not set or not accessible.Solution:
  1. Verify .env.local exists in project root
  2. Check variable names match exactly (case-sensitive)
  3. Restart development server after adding variables
  4. Ensure no extra spaces around = sign
# ✅ Correct
NEXT_PUBLIC_SUPABASE_URL=https://example.supabase.co

# ❌ Incorrect
NEXT_PUBLIC_SUPABASE_URL = https://example.supabase.co
Cause: Development server needs restart to load new environment variables.Solution:
  1. Stop the development server (Ctrl+C)
  2. Start it again: npm run dev
  3. Clear Next.js cache if needed: rm -rf .next
Cause: Variables without NEXT_PUBLIC_ prefix are not exposed to the browser.Solution:
  • Ensure all client-side variables have NEXT_PUBLIC_ prefix
  • Server-only secrets should NOT have this prefix
  • Rebuild after adding the prefix
Cause: Environment variables not configured in deployment platform.Solution:
  1. Check Vercel/deployment platform settings
  2. Verify all variables are added
  3. Ensure correct environment is selected
  4. Redeploy after adding variables

​
Additional Configuration

​
Optional Enhancements

While not currently used, you might want to add these for enhanced functionality: 
NEXT_PUBLIC_SITE_URL=https://your-app.vercel.app
Useful for:
  • OAuth redirect URLs
  • Email confirmation links
  • Absolute URL generation
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
This key bypasses Row Level Security. Only use in server-side code, never expose to client!
Useful for:
  • Admin operations
  • Bulk data operations
  • Bypassing RLS for migrations

​
Environment Variable Checklist

Use this checklist when setting up a new environment:
  • Created .env.local file in project root
  • Added NEXT_PUBLIC_SUPABASE_URL with correct project URL
  • Added NEXT_PUBLIC_SUPABASE_ANON_KEY with anon key from Supabase
  • Verified .env.local is in .gitignore
  • Restarted development server
  • Tested authentication flow
  • Configured production environment variables in Vercel
  • Verified production deployment works

Deployment Guide

Deploy with environment variables

Services

Learn how services use variables

Supabase Setup

Initial Supabase configuration