Create-next-supabase-starter NPM

🚀 create-next-supabase-starter

A powerful CLI tool to instantly scaffold a modern, production-ready Next.js 15 + Supabase project with a single command! 🎉

🤔 Why Use This Starter Instead of Starting from Scratch?

Setting up a Next.js 15 + Supabase project from scratch can be time-consuming and repetitive. Developers often spend hours configuring authentication, database setup, styling, and component libraries before even writing business logic.

This starter eliminates the setup hassle and provides a pre-configured, production-ready environment with stable versions, allowing you to focus on building features instead of boilerplate code.

🚀 Why waste hours configuring when you can start coding in minutes?

📌 Features

✅ Next.js 15 with App Router – Leverage the power of modern, server-driven architecture.
✅ React 19 Ready – Optimized with the latest React features.
✅ TypeScript by Default – Write safer, more maintainable code.
✅ Supabase Integration – Pre-configured authentication, database, and storage.
✅ Tailwind CSS – Fully styled with a scalable utility-based design system.
✅ shadcn/ui – Beautiful pre-built UI components.
✅ React Hook Form – Efficient and flexible form handling.
✅ Git Initialization (Optional) – Quickly set up version control.
✅ Automated Dependency Installation – No need to manually install packages.
✅ Environment Variables Included – .env.example setup for easy configuration.
✅ Scalable & Production-Ready – Best practices implemented out of the box.

📥 Installation & Usage

1️⃣ Quick Start (Recommended)

You don’t need to install anything! Simply run:

npx create-next-supabase-starter@latest my-project

2️⃣ Running Without a Project Name

If you don’t provide a name, the CLI will prompt you:

npx create-next-supabase-starter@latest my-project

👉 If you press Enter without a name, it will use "next-supabase-starter" by default.

📦 What’s Inside This Starter?

This starter is not just a simple Next.js setup—it comes fully loaded with essential features to kickstart any serious project.

🚀 Technology Stack

Technology	Purpose
Next.js 15 (App Router)	Optimized for performance and scalability with modern server components and dynamic routing.
React 19	Utilizes the latest features for efficient rendering and state management.
React Query	Utilizes the best practices for efficient fetching, mutating and client side state management.
TypeScript	Provides strong typing for better maintainability and developer experience.
Supabase	Includes authentication, database, and storage setup using `supabase`.
Tailwind CSS	A utility-first CSS framework for quick and scalable styling.
shadcn/ui	Pre-built, accessible UI components styled with Tailwind.
React Hook Form	Lightweight and powerful form handling with built-in validation.
pnpm	Efficient package manager with workspaces support.
ESLint & Prettier	Code formatting and linting pre-configured.
Environment Variables	Pre-configured `.env.example` for easy API setup.

🛠️ How It Works

1️⃣ Clones the Next.js + Supabase starter template.
2️⃣ Installs all dependencies automatically (pnpm install).
3️⃣ Asks if you want to initialize Git (git init).
4️⃣ Sets up a pre-configured project with:

Supabase authentication
Tailwind CSS & shadcn/ui
React Hook Form for forms
Next.js 15 (App Router)
TypeScript for type safety

5️⃣ Displays a success message with your next steps.

🛠️ Options & Features

Feature	Description
Project Name	If not provided, CLI will prompt for one. Default: `"next-supabase-starter"`.
Git Setup	Asks if you want to initialize a Git repository.
Automatic Installs	Installs all dependencies using `pnpm install`.
Pre-configured Supabase	Ready to use with `supabase-js` for auth, database, and storage.
React Query	Pre-configured React Query providers with custom hooks (fetch, mutate).
Auth Query Wrapper	Auth Context mixed between supabase functions with react query providers ensures fresh user session.
Tailwind & shadcn/ui	Built-in styling and UI components, ready to use.
React Hook Form	Form handling setup with built-in validation.

🔥 Why Use This Starter?

✅ No More Boilerplate Setup – Everything is pre-configured for you.
✅ Focus on Building, Not Configuring – Get started instantly with Next.js 15, Supabase, and Tailwind.
✅ Best Practices Included – The latest web development trends and best practices are built-in.
✅ Save Time & Effort – Stop wasting hours setting up the same things repeatedly. ✅ Built-Ins – Built-in auth system and thats always was a little hard for beginners with react query and supabase.

💡 With this starter, you can start writing actual business logic from Day 1!

🛠️ Example Output

🚀 Create Next.js + Supabase Project

Enter your project name (or press enter to use default): my-app

📦 Setting up my-app...

✅ Starter project cloned successfully!
📦 Installing dependencies...
🔗 Do you want to initialize Git? (Y/n)

🚀 Setup complete! Run the following to start your project:

  cd my-app
  pnpm dev

----------------------------------------
🎉 Created by Mohamed 4rarh 🚀
💻 GitHub: https://github.com/Mohamed-4rarh
----------------------------------------