Skip to main content

​
Overview

AniDojo uses Supabase as its backend platform, providing authentication, PostgreSQL database, and file storage. This guide walks you through creating and configuring your Supabase project.

​
Prerequisites

  • A Supabase account (Sign up for free)
  • Node.js 18+ installed
  • Basic familiarity with SQL and environment variables

​
Create Your Supabase Project

1

Sign in to Supabase

Navigate to supabase.com and sign in to your account.
2

Create a new project

Click New Project and fill in the details:
  • Name: anidojo (or your preferred name)
  • Database Password: Generate a strong password (save this!)
  • Region: Choose the region closest to your users
  • Pricing Plan: Free tier works great for development
3

Wait for provisioning

Your project will take 1-2 minutes to set up. Grab a coffee while Supabase provisions your database!

​
Get Your API Credentials

Once your project is ready, you’ll need to retrieve your API credentials.
1

Navigate to API Settings

In your Supabase dashboard, go to Settings → API
2

Copy your credentials

You’ll need two values:
  • Project URL: https://xxxxxxxxxxxxx.supabase.co
  • anon public key: A long JWT token starting with eyJ...
Never commit your service_role key to version control. Only use the anon key in your frontend code.

​
Configure Environment Variables

Add your Supabase credentials to your Next.js application.
1

Copy the example environment file

cp .env.example .env.local
2

Add your credentials

Open .env.local and add your Supabase credentials:
.env.local
NEXT_PUBLIC_SUPABASE_URL=https://xxxxxxxxxxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
3

Restart your development server

Environment variables are loaded at startup. Restart your dev server:
npm run dev
The NEXT_PUBLIC_ prefix makes these variables available in the browser. This is safe for the anon key, which is designed for client-side use.

​
Verify Your Connection

Test that your application can connect to Supabase: 
import { createClient } from '@/lib/supabase/client';

const supabase = createClient();

// Test the connection
const { data, error } = await supabase.auth.getSession();

if (error) {
  console.error('Connection failed:', error);
} else {
  console.log('Connected to Supabase!');
}

​
Supabase Client Architecture

AniDojo uses different Supabase clients depending on the context:
Used in React components and client-side code:
import { createClient } from '@/lib/supabase/client';

export function MyComponent() {
  const supabase = createClient();
  // Use supabase client...
}
Located in: src/lib/supabase/client.ts
Used in Server Components, API routes, and Server Actions:
import { createClient } from '@/lib/supabase/server';

export async function ServerComponent() {
  const supabase = await createClient();
  // Use supabase client...
}
Located in: src/lib/supabase/server.ts
Used in Next.js middleware for session management:Located in: src/lib/supabase/middleware.ts

​
Next Steps

Now that your Supabase project is set up, you can:

Database Schema

Set up your database tables and migrations

Authentication

Configure user authentication and providers

Storage Buckets

Create storage buckets for avatars and images

API Integration

Connect to the Jikan anime API

​
Troubleshooting

​
”Invalid API key” error

  • Verify your .env.local file has the correct values
  • Make sure you copied the anon key, not the service_role key
  • Restart your development server after changing environment variables

​
Connection timeout

  • Check your internet connection
  • Verify your Supabase project is active (not paused)
  • Confirm the Project URL is correct

​
CORS errors

  • Ensure you’re using the client-side client (@/lib/supabase/client) in browser code
  • Use the server-side client (@/lib/supabase/server) in API routes and Server Components

​
Resources

Build docs developers (and LLMs) love

Get started for freeTalk to us