Product name
Product description
Free plan with generous quotas
vc i supabase/supabasePostgres backend
These skills give agents instructions for working with Supabase. Installing this product will install these skills.
By integrating Supabase with Vercel, developers can leverage a Supabase Postgres Database, Auth, and Storage, Edge functions and Realtime while benefiting from Vercel's hassle-free deployment capabilities.
Some of the benefits from using this integration are:
For more information on pricing, click here.
When your project is up and running, click Open in Supabase button, go to the Table Editor, create a new table and insert some data.
Alternatively, you can run the following snippet in your project's SQL Editor. This will create a countries table with some sample data.
-- Create the table
create table notes (
id bigint primary key generated always as identity,
title text not null
);
-- Insert some sample data into the table
insert into notes (title)
values
('Today I created a Supabase project.'),
('I added some data and queried it from Next.js.'),
('It was awesome!');
alter table notes enable row level security;
Make the data in your table publicly readable by adding an RLS policy:
create policy "public can read notes"
on public.notes
for select to anon
using (true);
Use the create-next-app command and the with-supabase template, to create a Next.js app pre-configured with:
For more information on pricing, click here.
These variables provide essential configuration details such as the database connection URL, authentication credentials, and keys for accessing Supabase services.
By setting these variables appropriately, applications can establish connections to the database and securely interact with Supabase APIs.
Please exercise extreme caution with any environment variables from Supabase, especially any environment variables containing secret values.
Full list of variables installed:
POSTGRES_URL
POSTGRES_PRISMA_URL
POSTGRES_URL_NON_POOLING
POSTGRES_USER
POSTGRES_HOST
POSTGRES_PASSWORD
POSTGRES_DATABASE
SUPABASE_PUBLISHABLE_KEY
SUPABASE_SECRET_KEY
SUPABASE_URL
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY
NEXT_PUBLIC_SUPABASE_URL
Framework specific prefixes such as NEXT_PUBLIC_* can be modified via the Supabase dashboard.
A production-ready template for typo-tolerant, instant search over your Postgres data, indexed to Algolia, deployed on Vercel.
Run durable background workflows from your Vercel app.
Install Supabase to your Vercel project.
Start by connecting to your existing project and then run vercel link in the CLI to link to the project locally.
Run vercel env pull .env.development.local to make the latest environment variables available to your project locally.
Create a new file at app/notes/page.tsx and populate with the following.
import { createClient } from '@/utils/supabase/server';
export default async function Notes() {
const supabase = await createClient();
const { data: notes } = await supabase.from("notes").select();
return <pre>{JSON.stringify(notes, null, 2)}</pre>
}
This will select all the rows from the notes table in Supabase and render them on the page.
Run the development server with npm run dev, go to http://localhost:3000/notes in a browser and you should see the list of notes.
When your project is up and running, click Open in Supabase button, go to the Table Editor, create a new table and insert some data.
Alternatively, you can run the following snippet in your project's SQL Editor. This will create a countries table with some sample data.
-- Create the table
create table countries (
id bigint primary key generated always as identity,
name text not null
);
-- Insert some sample data into the table
insert into countries (name)
values
('Canada'),
('United States'),
('Mexico');
alter table countries enable row level security;
Make the data in your table publicly readable by adding an RLS policy:
create policy "public can read countries"
on public.countries
for select to anon
using (true);
Create a SvelteKit app using the npm create command.
npx sv create myapp
The fastest way to get started is to use the supabase-js client library which provides a convenient interface for working with Supabase from a SvelteKit app.
Navigate to the SvelteKit app and install supabase-js.
cd myapp && npm install @supabase/supabase-js
Start by connecting to your existing project and then run npx vercel link in the CLI to link to the project locally.
Run npx vercel env pull .env.development.local to make the latest environment variables available to your project locally.
Create a src/lib directory in your SvelteKit app, create a file called supabaseClient.js and add the following code to initialize the Supabase client with your project URL and public API (anon) key:
import { createClient } from '@supabase/supabase-js'
import { SUPABASE_ANON_KEY, SUPABASE_URL } from '$env/static/private'
export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)
Use load method to fetch the data server-side and display the query results as a simple list.
Create +page.server.js file in the src/routes directory with the following code.
import { supabase } from "$lib/supabaseClient";
export async function load() {
const { data } = await supabase.from("countries").select();
return {
countries: data ?? [],
};
}
Replace the existing content in your +page.svelte file in the src/routes directory with the following code.
<script>
let { data } = $props();
</script>
<ul>
{#each data.countries as country}
<li>{country.name}</li>
{/each}
</ul>
Run the development server with npm run dev, go to http://localhost:5173 in a browser and you should see the list of countries.