SupaNext Starter Kit (repository name: supa-next-starter) is an open-source boilerplate by Michael Troya for building full-stack Next.js and Supabase applications, bundling authentication via supabase-ssr, Tailwind CSS, shadcn/ui, and a pre-configured testing toolchain into one project scaffold.
What is supa-next-starter?
supa-next-starter is a Next.js 16 (App Router) starter template that pairs a Supabase backend with a modern frontend stack. You supply a Supabase project URL and anon key in the .env.local file, and the scaffold produces a running app on localhost:3000 with dark mode, typed components, and automated quality checks. It is maintained as an MIT-licensed public GitHub repository.
Key Features
- Next.js 16 App Router — The project runs on the latest Next.js with App Router conventions, plus React 19 and TypeScript for type safety.
- Supabase with supabase-ssr — Authentication and database access work across App Router, Pages Router, Client, Server, and Middleware through the official supabase-ssr package.
- Tailwind CSS and shadcn/ui — Styling uses Tailwind, and UI components come from shadcn/ui so they can be copied and pasted directly into your app.
- Test toolchain — Vitest and React Testing Library provide unit tests, and MSW v2 intercepts network requests during tests only.
- TanStack Query v5 — Client-side data fetching is handled by TanStack Query, with the library configured out of the box.
- Quality automation — ESLint 9, Prettier, Husky, and lint-staged enforce code style before commits, while GitHub Actions runs type checks, tests, and linters on pull requests.
- Developer conveniences — Path mapping with the @ prefix, dark mode via next-themes, a top loader via nextjs-toploader, and extras like Next Bundle Analyzer, Vercel Analytics, and the Vercel Geist font.
Who is it for?
- Personal project starters — Developers who want a pre-configured full-stack foundation so they can focus on features instead of wiring up auth, styling, and testing.
- SaaS founders — Builders who need authentication, protected routes, and a polished UI quickly with Supabase as the backend.
- Teams standardizing on Next.js — Organizations that want a consistent baseline with CI checks, formatting, and testing already in place before code is written.
- Tutorial learners — People studying how Next.js 16, Supabase SSR, and TanStack Query fit together in a real, working scaffold.
What can you do with it?
- Launch a productized SaaS quickly: Start with a Supabase-authenticated Next.js app and layer in billing, dashboards, and marketing pages without reconfiguring the build tooling.
- Test a full-stack idea with minimal setup: Use the included Vitest and MSW setup to write and run tests for both components and API interactions from day one.
- Ship a polished client project: Use the shadcn/ui components, dark mode toggle, and top loader to deliver a professional interface without starting from a blank canvas.
How does supa-next-starter work?
The README describes a five-step setup: create a Supabase project, run pnpm create next-app -e https://github.com/michaeltroya/supa-next-starter (or the npx equivalent), enter the new directory, rename .env.local.example to .env.local and fill in the Supabase URL and anon key from the Supabase API settings, then start the development server with pnpm run dev. After that, the app runs at localhost:3000. The repository includes scripts for building, type-checking, linting, formatting, testing, and bundle analysis.
FAQ
Is supa-next-starter free to use?
Yes. The project is released under the MIT License, and the template itself is a public GitHub repository. You will need your own Supabase project to provide the URL and anon key, but Supabase offers a free tier.
What Node.js and package manager versions are required?
The documentation states Node.js version 22.22.2 or newer and pnpm 11 are required. pnpm is the default package manager used by the lockfile, but the README explains how to switch to Yarn or npm by deleting pnpm-lock.yaml and updating the CI workflow and Husky hooks.
Does the starter include authentication?
Yes. It includes Supabase with the supabase-ssr library, which provides authentication handling across the App Router, Pages Router, client code, server code, and middleware. The actual Supabase policies and auth UI need to be configured to match your project.
What UI and styling libraries are included?
Tailwind CSS handles styling, and shadcn/ui provides copy-and-paste React components. Theme switching for dark mode is implemented with next-themes, and nextjs-toploader renders a top progress bar during navigation.
