Installation

# 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 and Permissions

service_role key is a super user key for the database.

• Hence, we never want to expose this.

anon_public is safe for exposure.

Storage

const transformedPicture = supabase.storage
  .from("bucket_name_here")
  .getPublicUrl("me.jpeg", {
    transform: {
      quality: 90,
    },
  }).data.publicUrl;

For NextJS

Place in next.config.mjs

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