Next.js and Supabase Starter Kit

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

Features · Demo · Clone and run locally · Feedback and issues · More Examples · License

Features

• Works across the entire Next.js stack
  • App Router
  • Pages Router
  • Middleware
  • Client
  • Server
  • It just works!
• supabase-ssr. A package to configure Supabase Auth to use cookies
• Styling with Tailwind CSS
• Components with shadcn/ui
• Optional deployment with Supabase Vercel Integration and Vercel deploy
  • Environment variables automatically assigned to Vercel project

Demo

You can view a fully working demo at demo-nextjs-with-supabase.vercel.app.

Clone and run locally

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

2. Then you'll need a Doppler project to manage your secrets (doppler.com).

3. Create a Next.js app using the Supabase Starter template npx command

   pnpm dlx create-next-app -e with-supabase

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

   cd name-of-new-app

5. Delete .env.local.example. We'll use Doppler to inject the secrets for use.

6. Install and setup Doppler CLI.

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

   doppler run -- pnpm dev

   The starter kit should now be running on localhost:3000. Secrets get injected by Doppler.

8. This template comes with the default shadcn/ui style initialized. If you instead want other ui.shadcn styles, delete components.json and re-install shadcn/ui

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

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

License

Licensed under the MIT license, Copyright © trueberryless.

See LICENSE for more information.