README.md

supabase-nextjs example

This example shows how to insert and retrieve data from a Supabase (Postgres) database using Next.js. It uses the App Router and SSR patterns:

• Mutation logic lives in app/action.ts using Next.js Server Actions.
• Query logic lives in app/queries.ts and is called from server components.
• Supabase client configuration is under lib/supabase/.

To run this example locally you need a .env.local file with your Supabase project keys:

NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key

Add your Supabase API keys there and then start the dev server.

Running this project locally

1. Install dependencies:

pnpm install

2. Create a .env.local file in the project root and add your Supabase keys (see above).

3. Start the development server:

pnpm dev

4. Open the app in your browser:

http://localhost:3000

Database schema

This example expects a notes table in your Supabase Postgres database. The table stores each note created from the UI:

Column	Type	Description
id	uuid	Primary key for the note
username	text	Name/handle of the note author
title	text	Short title for the note
description	text	Main content/body of the note
created_at	timestamptz	Timestamp when the note was created

A possible SQL definition for this table is:

create table if not exists notes (
  id uuid primary key default gen_random_uuid(),
  username text not null,
  title text not null,
  description text,
  created_at timestamptz not null default now()
);

How to Use

You can choose from one of the following two methods to use this repository:

One-Click Deploy

Deploy the example using Vercel:

Clone and Deploy

Execute create-next-app with npm or Yarn to bootstrap the example:

pnpm create next-app --example https://github.com/vercel/examples/tree/main/app-directory/supabase-nextjs

Next, run Next.js in development mode:

pnpm dev

Deploy it to the cloud with Vercel (Documentation).