🚀 Next.js 15 + Supabase Starter 2025

A modern, production-ready Next.js 15 starter with TypeScript, Tailwind CSS, Framer Motion, and Supabase integration.

Live Demo • Get Started • Documentation • Deploy

---

📸 Screenshots

🏠 Landing Page

Beautiful, responsive landing page with dark/light mode support

📱 Mobile Experience

Fully responsive design optimized for all devices

🎨 Component Showcase

Rich component library with smooth animations

---

✨ Features

🎨 Design & UI ✅ Beautiful, modern design system ✅ Dark/light mode with system preference ✅ Fully responsive (mobile-first) ✅ Smooth Framer Motion animations ✅ Glass morphism effects ✅ Custom CSS variables & utilities

⚡ Technical Stack ✅ Next.js 15.3.3 with App Router ✅ TypeScript with strict mode ✅ Tailwind CSS utility-first styling ✅ Framer Motion animations ✅ Supabase integration ready ✅ ESLint + Prettier code quality

🧩 Components Included

Component	Description	Preview
🧭 Navigation	Responsive nav with theme toggle
🦸 Hero Section	Animated hero with rotating text
🎥 Video Player	Placeholder for product demos
⭐ Features	Expandable feature showcase
💰 Pricing	Comparison table with CTAs
💬 Testimonials	Customer reviews carousel
❓ FAQ	Accordion-style questions
📧 Email Capture	Newsletter signup forms

---

🏃‍♂️ Quick Start

1️⃣ Clone & Install

# Clone the repository
git clone https://github.com/tesseract-creator/nextjs-supabase-2025-starter.git
cd nextjs-supabase-2025-starter

# Install dependencies
npm install

2️⃣ Environment Setup

# Copy environment template
cp .env.example .env.local

# Edit your environment variables
# Add your Supabase credentials, API keys, etc.

3️⃣ Start Development

# Start the development server
npm run dev

# Open http://localhost:3000

4️⃣ Customize Your Brand

• 🎨 Update colors in src/app/globals.css
• 🖼️ Replace logos in /public/assets/logos/
• 📝 Edit content in component files
• 🚀 Deploy to your favorite platform

---

🔧 Configuration

📋 Environment Variables

Create a .env.local file with these variables:

# 🗄️ Supabase (Required for database features)
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key

# 📧 Email Marketing (Optional)
KIT_API_KEY=your_kit_api_key
SENDGRID_API_KEY=your_sendgrid_api_key
SENDGRID_TEMPLATE_ID=your_sendgrid_template_id

# 📊 Analytics (Optional)
NEXT_PUBLIC_MICROSOFT_CLARITY_ID=your_clarity_project_id
NEXT_PUBLIC_GA_MEASUREMENT_ID=your_ga_measurement_id

# 🔒 Security & Monitoring (Optional)
SENTRY_DSN=your_sentry_dsn
NEXT_PUBLIC_SENTRY_DSN=your_sentry_dsn
RATE_LIMIT_API_KEY=your_rate_limit_key

# 🌐 Site Configuration
NEXT_PUBLIC_SITE_URL=https://yourdomain.com
NODE_ENV=production

🎨 Brand Customization

Colors

Update your brand colors in src/app/globals.css:

:root {
  --brand-primary: 218 50 41;    /* Your primary color */
  --brand-secondary: 92 38 35;   /* Your secondary color */
  --brand-accent: 224 57 47;     /* Your accent color */
}

Logos

Replace these files in /public/assets/logos/:

• logo-light.svg - Full logo for light theme
• logo-dark.svg - Full logo for dark theme
• icon-light.svg - Icon for mobile (light)
• icon-dark.svg - Icon for mobile (dark)

Content

Key files to customize:

• src/components/HeroOptimized.tsx - Hero section
• src/components/Features.tsx - Product features
• src/components/Pricing.tsx - Pricing plans
• src/components/Testimonials.tsx - Customer reviews
• src/components/FAQ.tsx - Questions & answers

---

📜 Available Scripts

Command	Description
npm run dev	🔥 Start development server
npm run build	🏗️ Build for production
npm start	🚀 Start production server
npm run lint	🔍 Run ESLint checks
npm run typecheck	📝 Run TypeScript checks
npm run format	✨ Format code with Prettier
npm run test	🧪 Run test suite

---

🚀 Deployment

Deploy with one click to your favorite platform

🔧 Manual Deployment Instructions

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Add your environment variables in Vercel dashboard
4. Deploy!

Other Platforms

This template works with:

• Netlify - Static site hosting
• AWS Amplify - Full-stack deployment
• Railway - Container deployment
• Digital Ocean - App platform
• Heroku - Container deployment

Build Settings:

• Build command: npm run build
• Start command: npm start
• Node version: 18.x or 20.x

---

📁 Project Structure

📦 nextjs-supabase-2025-starter/
├── 📂 .github/                 # GitHub templates & workflows
├── 📂 docs/                    # Documentation & screenshots
│   └── 📂 images/             # README images
├── 📂 public/                  # Static assets
│   ├── 📂 assets/
│   │   ├── 📂 logos/          # Brand logos
│   │   └── 📂 images/         # Public images
│   └── 📄 favicon.ico
├── 📂 src/                     # Source code
│   ├── 📂 app/                # Next.js App Router
│   │   ├── 📂 api/            # API routes
│   │   ├── 📄 globals.css     # Global styles
│   │   ├── 📄 layout.tsx      # Root layout
│   │   └── 📄 page.tsx        # Homepage
│   ├── 📂 components/         # React components
│   │   ├── 📂 ui/            # Reusable UI components
│   │   └── 📄 *.tsx          # Page components
│   └── 📂 lib/               # Utility functions
├── 📄 .env.example            # Environment template
├── 📄 .gitignore             # Git ignore rules
├── 📄 CLAUDE.md              # AI assistant guidelines
├── 📄 CONTRIBUTING.md        # Contribution guidelines
├── 📄 LICENSE                # MIT license
├── 📄 next.config.ts         # Next.js configuration
├── 📄 package.json           # Dependencies
├── 📄 README.md              # This file
├── 📄 tailwind.config.js     # Tailwind configuration
└── 📄 tsconfig.json          # TypeScript configuration

---

🎯 What's Included vs What You Add

✅ Included Out of the Box Complete UI component library Responsive design system Dark/light mode toggle Smooth animations & transitions TypeScript setup Development tooling SEO optimization Performance optimization Error boundaries Loading states Accessibility features

📝 You Need to Add Your actual content & copy Real logos & branding assets Supabase database schema Authentication workflows Email marketing setup Analytics configuration Payment integration Your specific business logic Custom API endpoints Production monitoring

---

🤝 Contributing

We welcome contributions! Please see our Contributing Guidelines for details.

🔄 Development Workflow

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

📚 Documentation

• 📘 Next.js Documentation
• 🎨 Tailwind CSS Docs
• ⚡ Framer Motion Guide
• 🗄️ Supabase Documentation
• 🔧 Component API Reference

---

🆘 Support

• 🐛 Bug Reports: Open an issue
• 💡 Feature Requests: Request a feature
• 💬 Questions: Join discussions

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

🙏 Credits

Built with ❤️ by Tesseract Creator

Made possible by these amazing technologies:

⭐ If this project helped you, please give it a star

---

Ready to build something amazing? Get started now! 🚀