Next.js and Supabase Starter Kit

The fastest way to build apps with Next.js and Supabase

Features · Demo · Deploy to Vercel · Clone and run locally · Feedback and issues

Features

• Bootstraped with Next.js with Supabase

  • App Router
  • Server Rendered
  • Middleware
  • Protected Routes
  • Type-Safed Schema using Drizzle ORM

• supabase-ssr. A package to configure Supabase Auth to use cookies

• Styling with Next UI

Demo

You can view a fully working demo at https://nextjs-app-supabase-template.vercel.app.

Deploy to Vercel

Add required environment-variables while deploying on Vercel:

The above will also clone the Starter kit to your GitHub, you can clone that locally and develop locally.

If you wish to just develop locally and not deploy to Vercel, follow the steps below.

Clone and run locally

1. You'll first need a Supabase project which can be made via the Supabase dashboard

2. Clone this repo

   git clone https://github.com/Navin-Jethwani-76/nextjs-supabase-template.git

3. Use cd to change into the app's directory

   cd nextjs-supabase-template
   npm install

4. Rename .env.local.example to .env.local and update the following:

   NEXT_PUBLIC_SUPABASE_URL=[INSERT SUPABASE PROJECT URL]
   NEXT_PUBLIC_SUPABASE_ANON_KEY=[INSERT SUPABASE PROJECT API ANON KEY]
   DATABASE_URL=[INSERT SUPABASE PROJECT DATABASE CONNECTION URL]
   SUPABASE_ADMIN_KEY=[INSERT SUPABASE PROJECT API SERVER_ROLE KEY]
   NEXT_PUBLIC_SUPABASE_BUCKET=[INSERT SUPABASE PROJECT STORAGE BUCKET NAME]
   

   • NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY and SUPABASE_ADMIN_KEY can be found in your Supabase project's API settings

   • DATABASE_URL can be found in your Supabase project's Database settings

   • NEXT_PUBLIC_SUPABASE_BUCKET can be anything. by default 'bucket-01' will be present in .env.local but you will need to create the bucket of the same name inside your Supabase project's Storage.

5. You can now run the Next.js local development server:

   npm run dev

   The starter kit should now be running on localhost:3000.

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

Feedback and issues

• If you have enabled RLS in Supabase, You need to add policies to public tables and storage.objects.
• Policies enabled in Demo are listed below.
  • Policy for public.products
  • Select Policy for storage.objects
  • Delete Policy for storage.objects - Only delete if authenticated with user id.
  • Insert Policy for storage.objects - Only Insert if authenticated with user id.

Please file feedback and issues Here.