Environment Variables

Overview

AniDojo requires specific environment variables to connect to Supabase and function properly in production. This guide covers all required and optional environment variables.

Never commit environment variables to your repository. Always use .env.local for local development and configure them in your deployment platform (Vercel) for production.

Required Environment Variables

These variables are essential for AniDojo to function:

Supabase Configuration

NEXT_PUBLIC_SUPABASE_URL

string

required

Your Supabase project URLExample: https://abcdefghijklmnop.supabase.coWhere to find:

Go to your Supabase Dashboard
Select your project
Navigate to Settings → API
Copy the Project URL

NEXT_PUBLIC_SUPABASE_ANON_KEY

string

required

Your Supabase anonymous/public API keyExample: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...Where to find:

Go to your Supabase Dashboard
Select your project
Navigate to Settings → API
Copy the anon public key

This key is safe to use in client-side code. It’s protected by Row Level Security (RLS) policies in your database.

Local Development Setup

Create Environment File

Create a .env.local file in your project root:

touch .env.local

The .env.local file should already be in your .gitignore. Never commit it to version control.

Add Variables

Add your Supabase credentials to .env.local:

.env.local

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

Restart Development Server

Environment variables are loaded at startup, so restart your development server:

npm run dev

Production Setup (Vercel)

For production deployments on Vercel:

Navigate to Project Settings

Go to your project dashboard on Vercel
Click Settings
Select Environment Variables from the sidebar

Add Each Variable

For each required environment variable:

Enter the Key (e.g., NEXT_PUBLIC_SUPABASE_URL)
Enter the Value (your actual credential)
Select environments:
- ✅ Production (required)
- ✅ Preview (recommended)
- ⬜ Development (optional)
Click Save

Adding variables to Preview environments ensures pull request deployments work correctly.

Redeploy

After adding or updating environment variables, trigger a new deployment:

Go to the Deployments tab
Click the ⋯ menu on the latest deployment
Select Redeploy

Or simply push a new commit to your repository.

Environment Variable Types

Public vs Private Variables

Next.js has two types of environment variables: Public Variables (prefixed with NEXT_PUBLIC_)

Exposed to the browser
Can be used in client-side code
Bundled into your JavaScript
Example: NEXT_PUBLIC_SUPABASE_URL

// ✅ Works in client components
'use client';
const url = process.env.NEXT_PUBLIC_SUPABASE_URL;

Private Variables (no prefix)

Only available on the server
Cannot be accessed in client-side code
Used for sensitive secrets
Example: DATABASE_PASSWORD (if needed)

// ✅ Only works in server components/API routes
const secret = process.env.DATABASE_PASSWORD;

AniDojo uses the Supabase anonymous key (NEXT_PUBLIC_SUPABASE_ANON_KEY) which is safe to expose publicly. Security is handled by Row Level Security (RLS) policies in your Supabase database.

Verifying Configuration

Local Development

Verify your environment variables are loaded correctly:

// Add this temporarily to any server component
export default function TestPage() {
  console.log('Supabase URL:', process.env.NEXT_PUBLIC_SUPABASE_URL);
  console.log('Key present:', !!process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY);
  return <div>Check console</div>;
}

Production

Test your production environment:

Deploy your application
Open browser DevTools → Console
Run: console.log(process.env.NEXT_PUBLIC_SUPABASE_URL)
Verify the correct URL is displayed

If you see undefined, your environment variables are not configured correctly in Vercel.

Using Environment Variables

In Client Components

src/lib/supabase/client.ts

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

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  );
}

In Server Components

src/lib/supabase/server.ts

import { createServerClient } from '@supabase/ssr';
import { cookies } from 'next/headers';

export async function createClient() {
  const cookieStore = await cookies();

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) =>
            cookieStore.set(name, value, options)
          );
        },
      },
    }
  );
}

In Middleware

src/lib/supabase/middleware.ts

import { createServerClient } from '@supabase/ssr';
import { NextResponse, type NextRequest } from 'next/server';

export async function updateSession(request: NextRequest) {
  let supabaseResponse = NextResponse.next({ request });

  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value }) =>
            request.cookies.set(name, value)
          );
          supabaseResponse = NextResponse.next({ request });
        },
      },
    }
  );

  await supabase.auth.getUser();
  return supabaseResponse;
}

Troubleshooting

”Cannot read property of undefined”

Cause: Environment variable not set or misspelled Solution:

Check variable names match exactly (including NEXT_PUBLIC_ prefix)
Verify variables are set in .env.local (local) or Vercel dashboard (production)
Restart development server after changing .env.local
Redeploy after updating Vercel environment variables

”Invalid API key” from Supabase

Cause: Incorrect or expired Supabase credentials Solution:

Verify you copied the correct keys from Supabase dashboard
Check for extra spaces or newlines in the values
Ensure you’re using the anon public key, not the service role key
Verify your Supabase project is active (not paused)

Variables Not Updating

Local Development:

Restart your development server (npm run dev)
Clear Next.js cache: rm -rf .next

Production (Vercel):

Trigger a new deployment after updating variables
Clear build cache in Vercel settings if issues persist

Security Concerns

“Is it safe to expose the anon key?” Yes! The Supabase anonymous key is designed to be public. Security is enforced through:

Row Level Security (RLS): Database policies control data access
JWT verification: Supabase verifies user authentication tokens
Rate limiting: Built-in protection against abuse

Never expose your Supabase service_role key in client-side code. This key bypasses RLS and should only be used in secure server environments.

Best Practices

Use different Supabase projects for development and production

Create separate Supabase projects for dev and prod
Use different environment variables for each
Prevents test data from polluting production
Example: dev.env.local and production variables in Vercel

Rotate keys periodically

Rotate your Supabase anon key every few months
Update environment variables in all environments
Redeploy to apply changes
Document key rotation dates

Document required variables

Create an .env.example file with dummy values
Commit it to version control
Helps new developers set up their environment
Example:

.env.example

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

Use type-safe environment variables

Create a helper to validate environment variables:

lib/env.ts

export const env = {
  supabaseUrl: process.env.NEXT_PUBLIC_SUPABASE_URL!,
  supabaseAnonKey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
};

// Validate at build time
if (!env.supabaseUrl || !env.supabaseAnonKey) {
  throw new Error('Missing required environment variables');
}

Architecture

Deployment

Contributing

Environment Variables

Overview

Required Environment Variables

Supabase Configuration

Local Development Setup

Production Setup (Vercel)

Environment Variable Types

Public vs Private Variables

Verifying Configuration

Local Development

Production

Using Environment Variables

In Client Components

In Server Components

In Middleware

Troubleshooting

”Cannot read property of undefined”

”Invalid API key” from Supabase

Variables Not Updating

Security Concerns

Best Practices

Next Steps

Deploy to Vercel

Database Migrations

Build docs developers (and LLMs) love

Architecture

Deployment

Contributing

​Overview

​Required Environment Variables

​Supabase Configuration

​Local Development Setup

​Production Setup (Vercel)

​Environment Variable Types

​Public vs Private Variables

​Verifying Configuration

​Local Development

​Production

​Using Environment Variables

​In Client Components

​In Server Components

​In Middleware

​Troubleshooting

​”Cannot read property of undefined”

​”Invalid API key” from Supabase

​Variables Not Updating

​Security Concerns

​Best Practices

​Next Steps

Deploy to Vercel

Database Migrations

Build docs developers (and LLMs) love

Overview

Required Environment Variables

Supabase Configuration

Local Development Setup

Production Setup (Vercel)

Environment Variable Types

Public vs Private Variables

Verifying Configuration

Local Development

Production

Using Environment Variables

In Client Components

In Server Components

In Middleware

Troubleshooting

”Cannot read property of undefined”

”Invalid API key” from Supabase

Variables Not Updating

Security Concerns

Best Practices

Next Steps