Skip to main content

Supabase Database Integration

The example of how we use Supabase DB in SupaLaunch is located in src/lib/db/server-side/cards.ts.

Database Schema in your NextJS app​

During the development, it is convenient to have a database schema in your NextJS app. This way you can easily see what tables and columns you have in your database. You can also see the data types of each column.

In SupaLaunch, the schema is located in /src/lib/db/database.ts. This file is generated automatically using the following command:

supabase gen types typescript --db-url postgresql://postgres:postgres@localhost:54322/postgres > ./src/lib/db/database.ts

We use this schema in two ways:

  1. Each time we initialize the Supabase client, we pass the schema to it. This will help with autocompletion in your IDE.
const supabase = createRouteHandlerClient<Database>({cookies})
  1. We can create TypeScript types based on this schema. For the example, check the file /src/lib/db/database-types.ts.
export type Card = Database["public"]["Tables"]["cards"]["Row"]

SupaBase Database Migrations​

There are a couple of useful commands that you can use to manage your Supabase database migrations.

Create migrations for the local database:

supabase db diff --use-migra <name> -f <name>

Create migrations for the Supabase Storage (this doesn't include buckets creation):

supabase db diff --use-migra <name> -f <name> --schema storage

Apply existing migrations to the production database:

supabase db push