Next.js + Supabase Project Generator

A project generator for Next.js with Supabase and UI library selection (Tailwind CSS, Radix UI/shadcn, Material-UI).

🚀 Installation

NPM Installation (Recommended)

npm install -g next-supabase-generator

Now you can use the generator from anywhere!

From Source

# Clone the repository
git clone https://github.com/dwantula/project-generator.git
cd project-generator

# Install dependencies
npm install

# Create global link
npm link

📦 Usage

Creating a New Project

From any directory, run:

create-next-supabase
# or shorter:
cns

The generator will ask you for:

1. UI library choice - Tailwind CSS, Radix UI (shadcn/ui), or Material-UI
2. Project name - lowercase letters, numbers, and hyphens only
3. Project description - optional
4. Project author - optional

The project will be created in the current directory with:

• ✅ Automatic dependency installation (npm install)
• ✅ Automatic shadcn/ui configuration (if Radix is selected)
• ✅ Ready-to-use project structure

📦 What You Get

The generator creates a complete Next.js + Supabase project:

• ✅ Next.js (latest version) with App Router
• ✅ TypeScript - full type support
• ✅ Supabase - ready-to-use client and middleware configuration
• ✅ UI library choice:
  • Tailwind CSS - utility-first CSS framework
  • Radix UI (shadcn/ui) - accessible components + Tailwind
  • Material-UI - complete component library
• ✅ Vercel - ready for deployment
• ✅ Environment Variables - example .env.local.example file
• ✅ Organized folder structure - clean project architecture
• ✅ Automatic installation - npm install and shadcn init (if selected)

🎨 UI Libraries

Tailwind CSS

Basic configuration with utility classes. Perfect for rapid prototyping.

Next steps:

• Use Tailwind classes directly in your components
• Documentation: https://tailwindcss.com/docs

Radix UI (shadcn/ui)

Accessible, unstyled components + Tailwind CSS. Components are copied into your project.

Next steps:

• Add components: npx shadcn@latest add button
• List components: npx shadcn@latest add
• Documentation: https://ui.shadcn.com

Structure:

your-project/
├── components/
│   └── ui/              # shadcn components (e.g., button.tsx)
├── lib/
│   └── ui/
│       └── radix-config.ts  # cn() helper function
└── components.json      # shadcn configuration

Material-UI

Complete component library with Google Material Design.

Next steps:

• Import components: import { Button } from '@mui/material'
• Customize theme in lib/ui/mui-theme.ts
• Documentation: https://mui.com

Structure:

your-project/
└── lib/
    └── ui/
        └── mui-theme.ts  # MUI theme configuration

📁 Generated Project Structure

your-project-name/
├── app/                      # Next.js App Router
│   ├── layout.tsx           # Root layout (with UI providers)
│   ├── page.tsx             # Home page
│   └── globals.css          # Global styles (conditional for UI)
├── components/              # React components
│   └── ui/                  # shadcn components (Radix only)
├── lib/                     # Libraries and utilities
│   ├── supabase/           # Supabase configuration
│   │   ├── client.ts       # Browser client
│   │   ├── server.ts       # Server client
│   │   └── middleware.ts   # Middleware helper
│   └── ui/                 # UI-specific configs (conditional)
│       ├── radix-config.ts # cn() helper (Radix)
│       └── mui-theme.ts    # MUI theme (Material-UI)
├── public/                 # Static files
├── types/                  # TypeScript types
├── .env.local.example      # Example environment variables
├── middleware.ts           # Next.js middleware (Supabase auth)
├── components.json         # shadcn config (Radix only)
├── tailwind.config.ts      # Tailwind config (conditional)
└── package.json            # Dependencies (conditional for UI)

🔧 Next Steps After Generation

The generator automatically:

1. ✅ Installs dependencies (npm install)
2. ✅ Initializes shadcn/ui (if Radix is selected)

You need to:

1. Navigate to the project directory:

   cd project-name

2. Configure Supabase environment variables:

   cp .env.local.example .env.local

   Fill in .env.local with your Supabase project values:

   NEXT_PUBLIC_SUPABASE_URL=your-project-url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

3. Start the development server:

   npm run dev

4. Open http://localhost:3000 in your browser.

🎯 Extending the Generator

Modifying the Template

You can customize the templates/next-supabase-full/ template to fit your needs. Available Handlebars variables:

• {{projectName}} - project name
• {{description}} - project description
• {{author}} - author name
• {{isRadix}} - flag for Radix UI
• {{isMui}} - flag for Material-UI
• {{isTailwind}} - flag for Tailwind

Example usage:

{{#unless isMui}}import './globals.css'{{/unless}}
{{#if isMui}}import { ThemeProvider } from '@mui/material/styles'{{/if}}

Adding New UI Libraries

1. Update plopfile.js:

   • Add new option in the uiLibrary prompt
   • Add helper flag (e.g., data.isNewUI)
   • Add conditional actions for new library-specific files

2. Update package.json.hbs templates:

   • Add conditional dependencies for the new library

3. Update layout.tsx.hbs, globals.css.hbs, tailwind.config.ts.hbs templates:

   • Add conditional logic for the new library

4. Create configuration files in templates/*/lib/ui/:

   • E.g., new-ui-config.ts

📚 Documentation

• Next.js Documentation
• Supabase Documentation
• Tailwind CSS Documentation
• shadcn/ui Documentation
• Material-UI Documentation
• Vercel Documentation
• Plop.js Documentation

🔄 Updating the Generator

If you installed via npm:

npm update -g next-supabase-generator

If you used npm link:

cd ~/path/to/project-generator
git pull
npm install

🛠️ Development

# Clone repo
git clone https://github.com/dwantula/project-generator.git
cd project-generator

# Install dependencies
npm install

# Test locally
node ./bin/create-project.js

# Or create a global link
npm link
create-next-supabase

❓ Troubleshooting

Error: Cannot find module 'plop'

cd project-generator
npm install

shadcn init doesn't work (Radix)

The generator automatically runs npx shadcn@latest init -d. If it fails:

cd your-project
npx shadcn@latest init

TypeScript errors after generation

Check if npm install completed successfully:

cd your-project
rm -rf node_modules package-lock.json
npm install

📝 License

MIT

🤝 Contact

• GitHub: @dwantula
• Issues: Report a bug