seed
Recipes
Supabase

Supabase

I absolutely love Supabase!

💡

For seeding data into your Supabase project, only the public and auth schemas are supported. If you experience any issues with any of the paths, reach out to us on Discord (opens in a new tab).

Generate data for your Supabase local development stack

Supabase makes it easy to set up a local development environment linked to your Supabase project. Snaplet can improve your local development by seeding your local database with data, making coding and testing more efficient and accurate.

In this short guide, we use the snaplet seed command to seed a local Supabase stack. We will use the Nextjs + Supabase template (opens in a new tab) as an example.

Prerequisites

1. Clone the Nextjs + Supabase template

1.1. Create a Next.js app using the starter template by running the npx command:


npx create-next-app -e with-supabase

1.2. Use cd to change into the newly created directory:


cd name-of-new-app

2. Setup your Supabase project and apply migrations

2.1. Initialize the configuration for your Supabase local development project.


supabase init

2.2. Start your Supabase local stack. This will run the latest migrations against your local database.


supabase start

This command will print out the following output:


Started supabase local development setup.
API URL: http://localhost:54321
DB URL: postgresql://postgres:postgres@localhost:54322/postgres
Studio URL: http://localhost:54323
Inbucket URL: http://localhost:54324
anon key: eyJh......
service_role key: eyJh......

2.3. Copy the DB URL - we will use this in the next step (step 4) to generate data into (referred to as the target database).

3. Set up your Snaplet seed config

3.1. Create a seed.mts file in your root directory.

>_ terminal

npx snaplet setup

>_ 

✔ Welcome to Snaplet! 😸 Choose your adventure: › I want to generate seed data 🌱
✔ Target database connection string … postgresql://postgres:postgres@localhost:54322/postgres
✔ Database URL … postgresql://postgres:postgres@localhost:54322/postgres
✔ Would you like to link your account from Snaplet Cloud to have more realistic data using our AI model? 🤖 … no
For the best AI-enhanced data generation experience, create a free Snaplet account and login with: snaplet auth login.
Snaplet uses details about your database to improve our generation results.
✔ You're all set!
📝 Edit your seed script:
You can describe how you would like to generate seed data by editing the example seed script:
code seed.mts
👁️ Preview seed statements:
You can take a look at the sql statements that can be generated with:
npx tsx seed.mts
✨ Apply seeds:
To load the generated data into your database execute the command:
DRY=0 npx tsx seed.mts

3.2. Update the seed.mts file to create 10 users and 20 todos, the todos should be assigned to at least one of the 10 users.

seed.mts

// create 10 users
await seed.users((x) => x(10));
// create 20 todos, for each of the 10 users
await seed.todos((x) => x(20), { connect: true });

You are now ready to seed your database.

4. Reset and seed your local development database

4.1 Run npx tsx seed.mts and pipe the output to your supabase/seed.sql file.


npx tsx seed.mts > supabase/seed.sql

4.2 Reset your local development database. This will run all the existing migrations and apply the seed script (at supabase/seed.sql).


supabase db reset

4.3 Check your local database to see if the result of your seed script.

Now if you visit the Supabase Studio URL hosted locally (http://localhost:54323 (opens in a new tab)) and inspect the "todo" table, you should see 20 todo items.

20 todos in the studio dashboard

In your project folder, if you move app/_examples/client-component/page.tsx to app/todos/page.tsx and then visit http://localhost:3000/todos you should see all the todos created.

list of todos in nextjs app

All done!

You have now successfully seeded your Supabase local development stack. As well as use the snaplet seed command to seed your local database with the data you need.

If you have any questions or feedback, reach out to us on Discord (opens in a new tab).