Skip to main content

Setup Supabase

Setup backend​

  1. Setup NextJS and Supabase
  2. To connect your project to the supabase deployed environment, navigate to Project Settings > Data API, copy the project url and put it in NEXT_PUBLIC_SUPABASE_URL. Then navigate to Project Settings > API Keys, create a Publishable and secret Key api. Finally copy the default key's value from the Publishable key in NEXT_PUBLIC_SUPABASE_ANON_KEY.
NEXT_PUBLIC_SUPABASE_URL="https://crnytzptlghehxsarjxm.supabase.co"
NEXT_PUBLIC_SUPABASE_ANON_KEY="sb_publishable_5kkxiPW8Oq6dAbn4qeF4Cw_iUZBqmSf"
  1. Now running the local development server will connect to your Supabase backend
cd nextjs
npm run
info

Supabase used to have a Legacy anon key, and service_role API key which could only be created once. This key was not rollable. Having a service role key that is generated once during project creation and cannot be changed, has consequence. Specifically, if your key gets exposed, its gonna create a lot of headaches for you. Having a rollable key allows you to switch the keys if anything happens. I recommend using the publishable and secret API keys. If you have an old project using Legacy keys, please switch the keys.

Local Setup (Optional)​

  1. Setup local Supabase
  2. Copy local environment file
cd nextjs
cp .env.local.example .env.local
  1. Run the local development server
pnpm run
note

.env.local variables will override the .env variables when running nextjs locally. Click here for more info