Setup

# install supabase on the machine
brew install supabase/tap/supabase

# add supabase package
yarn add @supabase/supabase-js

Init Supabase Client

// Server Side Init
import { createClient } from '@supabase/supabase-js'

const supabase = createClient<Database>(
  process.env.SUPABASE_URL,
  process.env.SUPABASE_ANON_KEY
)

// Client Side Init
import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL || "",
  process.env.NEXT_PUBLIC_SUPABASE_KEY || ""
);

Keys, Security, Policies, and Permissions

service_role key is a superuser key for the database.

• NEVER EXPOSE service_role API key.

anon_public is safe for exposure.

• anon user's permission set is defined by the RLS policies of the table.

you should ALWAYS set up RLS per table

For NextJS

Place in next.config.mjs

const nextConfig = {
  images: {
      remotePatterns: [
        {
          protocol: 'https',
          hostname: 'supabase_page_url',
          port: '',
        },
      ],
  },
}