rsnext/examples/with-supabase

Supabase Starter

This starter configures Supabase Auth to use cookies, making the user's session available throughout the entire Next.js app - Client Components, Server Components, Route Handlers, Server Actions and Middleware.

Deploy your own

The Vercel deployment will guide you through creating a Supabase account and project. After installation of the Supabase integration, all relevant environment variables will be set up so that the project is usable immediately after deployment 🚀

How to use

1. Create a new Supabase project
2. Run npx create-next-app -e with-supabase myapp to create a Next.js app using the Supabase Starter template
3. Run cd myapp to change into the app's directory
4. Run npm install to install dependencies
5. Rename .env.local.example to .env.local and update the values for NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY from your Supabase project's API settings
6. Run npm run dev to start the local development server

Check out the docs for Local Development to also run Supabase locally.

Create Table and seed with data (optional)

Navigate to your project's SQL Editor, click New query, paste the following SQL 👇 and click RUN.

create table if not exists todos (
  id uuid default gen_random_uuid() primary key,
  created_at timestamp with time zone default timezone('utc'::text, now()) not null,
  title text,
  is_complete boolean default false
);

insert into todos(title)
values
  ('Create Supabase project'),
  ('Create Next.js app from Supabase Starter template'),
  ('Keeping building cool stuff!');

Feedback and issues

Please file feedback and issues over on the Supabase GitHub org.

More Supabase examples

• Next.js Subscription Payments Starter
• Cookie-based Auth and the Next.js 13 App Router (free course)
• Supabase Auth and the Next.js App Router
• Next.js Auth Helpers Docs