Next.js and Supabase

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

Features · Demo · Clone and run locally ·

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
• Optional deployment with Supabase Vercel Integration and Vercel deploy
  • Environment variables automatically assigned to Vercel project

Clone and run locally

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

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

   npx create-next-app -e with-supabase

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

   cd name-of-new-app

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]
   

   Both NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY can be found in your Supabase project's API settings

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.