Repository files navigation

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

Features ·Demo ·Deploy to Vercel ·Clone and run locally ·Feedback and issuesMore Examples

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

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

Vercel deployment will guide you through creating a Supabase account and project.

After installation of the Supabase integration, all relevant environment variables will be assigned to the project so the deployment is fully functioning.

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.

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

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

   npx create-next-app --example with-supabase with-supabase-app

   yarn create next-app --example with-supabase with-supabase-app

   pnpm create next-app --example with-supabase with-supabase-app

3. Usecd to change into the app's directory

   cd with-supabase-app

4. Rename.env.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]

   BothNEXT_PUBLIC_SUPABASE_URL andNEXT_PUBLIC_SUPABASE_ANON_KEY can be found inyour 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 onlocalhost:3000.

6. This template comes with the default shadcn/ui style initialized. If you instead want other ui.shadcn styles, deletecomponents.json andre-install shadcn/ui

Check outthe docs for Local Development to also run Supabase locally.

Please file feedback and issues over on theSupabase GitHub org.

• 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