Next.js and Supabase Starter Kit

The Next.js and Supabase Starter Kit is a boilerplate template maintained in the Next.js repository that pre-configures Supabase Auth to use cookies across the entire Next.js stack, with Tailwind CSS and shadcn/ui styling.

What is the Next.js and Supabase Starter Kit?

The Next.js and Supabase Starter Kit is an official example that scaffolds a Next.js app with Supabase authentication configured for cookie-based sessions. It takes a Supabase project URL and API key as environment variables and outputs a running application with password-based sign-in and sign-up screens built from the Supabase UI Library. The template works with both the App Router and Pages Router, and it is demonstrated live at demo-nextjs-with-supabase.vercel.app.

Key Features

• Full Next.js stack support — The auth setup works across App Router, Pages Router, Proxy, Client, Server, and Route Handlers, using the supabase-ssr package to manage cookie-based sessions.
• Password-based authentication — A sign-in and sign-up block from the Supabase UI Library is installed, with environment values read from .env.local.
• Tailwind CSS styling — The starter uses Tailwind CSS for utility-first styling with no additional configuration.
• shadcn/ui components — Pre-initialized with shadcn/ui including components.json; deleting that file and re-installing shadcn/ui gives a different component style.
• One-click Vercel deployment — The Supabase Vercel Integration automatically creates a Supabase project and assigns the required environment variables to the deployed app.
• Local development workflow — Bootstrap with npx create-next-app --example with-supabase and run npm run dev to serve on localhost:3000.

Who is it for?

• Next.js developers — who want a working Supabase Auth integration without wiring cookie handling themselves.
• Indie hackers and startups — who need a fast way to get a login and signup flow into a new SaaS app.
• Developers learning Supabase — who want a minimal, official example to study how the supabase-ssr package works in practice.

What can you do with it?

• Ship an authenticated MVP quickly — Clone the template, plug in Supabase keys, and get a password-based auth flow with minimal effort.
• Learn cookie-based auth — Study how the supabase-ssr package exposes the session to every part of Next.js, including Server Actions and Middleware.
• Customize the UI — Replace the default shadcn/ui theme by removing components.json and re-installing a preferred style.

How does it work?

1. Create a Supabase project via the Supabase dashboard.
2. Run npx create-next-app --example with-supabase with-supabase-app.
3. Copy .env.example to .env.local and add NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY from your project's API settings.
4. Run npm run dev to start the app on localhost:3000.

FAQ

Is the Next.js and Supabase Starter Kit free?

Yes. The starter kit is open source and hosted in the Next.js examples directory. You only pay for whatever Supabase and Vercel usage you incur.

Which environment variables do I need to set?

You need NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY, both found in your Supabase project's API settings. The example uses the new publishable key format, but legacy anon keys also work.

Can I use this with the Pages Router?

Yes. The template works across the entire Next.js stack, including Pages Router, App Router, Proxy, Client, and Server.

How do I change the shadcn/ui style?

Delete components.json and re-install shadcn/ui using the installation instructions for Next.js.