Next.js v15 TDD Supastarter 🤩
Next.js, Supabase, Drizzle, Jest

Build durable, tested, type-safe apps with Next.js 15 and Supabase

This project integrates Next.js 15, with the Vercel boilerplate examples from with-supabase, with-jest, and postgres-drizzle, fixes a few issues and sets up a hyper-efficient run-on-save, debugger-ready TDD workflow in VS Code.

💎 Features · 🚗 Clone and run · 🧪 Streamlined testing · 👋 Feedback and issues

Features

• Run-on-save Jest tests with VS Code debugging preconfigured (video below 📺)
• Debugger set up for both test and dev scripts. Just addd breakpoints
• Works across the Next.js stack
  • App Router
  • Middleware
  • Client
  • Server
• Supabase auth, middleware and protected route example
• Styling with Tailwind CSS
• Components with shadcn/ui
• Drizzle integration, which assumes the Supabase with Next.js schema

Clone and run

1. Clone this repo

2. Set up a Supabase project

3. Copy .env.example to .env and update:
   

   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY Both can be found in your Supabase project's API settings.
   • DATABASE_URL Find from the Supabase Dashboard > Connect

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

   npm run dev

5. 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.

Testing

tdd-supastar-demo.mp4

Run and watch tests:

  npm run test:inspect

A VS Code launch.json file is included, allowing you to just open Debug sidebar to attach the VS Code.

Just hit save to run tests. Add breakpoints. See to see what's going on. 🔬

Feedback and issues

This is not an official Supabase or Vercel project. It's just my own personal preference and dev workflow that I thought I would share. Feel free to create issues, fork and improve this project. Drop a ⭐️ if you'd like. Sometimes I am also hiring. Connect with me on Twitter @rsweetland

Todo

• Add drizzle migrations
• npm run dev:inspect