Next.js Starter

A modern, production-ready Next.js starter template with Supabase backend integration.

🚀 Features

• Next.js 14 with App Router
• TypeScript with strict configuration
• Tailwind CSS with dark mode support
• Supabase for database and authentication
• Stripe integration for payments
• React Query for data fetching and caching
• ESLint and Prettier for code quality
• Responsive design with mobile-first approach

🛠️ Tech Stack

Frontend

• Next.js 14 - React framework
• TypeScript - Type safety
• Tailwind CSS - Styling
• Lucide React - Icons
• next-themes - Theme management

Backend & Database

• Supabase - Backend as a Service
• PostgreSQL - Database
• Row Level Security (RLS) - Data security

Additional

• TanStack Query - Data fetching
• Stripe - Payment processing
• Zod - Schema validation
• date-fns - Date utilities

🏁 Quick Start

Prerequisites

• Node.js 18+
• npm/yarn/pnpm
• Supabase account

1. Clone the repository

git clone <your-repo-url>
cd nextjs-starter

2. Install dependencies

npm install

3. Set up environment variables

cp .env.local.example .env.local

Fill in your environment variables:

# Supabase
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key

# Stripe (optional)
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key
STRIPE_SECRET_KEY=your_stripe_secret_key

# Other
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_nextauth_secret

4. Run the development server

npm run dev

Open http://localhost:3000 to see your application.

📁 Project Structure

├── src/
│   ├── app/                 # App Router pages
│   ├── components/          # Reusable components
│   ├── lib/                 # Utility functions
│   └── types/               # TypeScript type definitions
├── public/                  # Static assets
├── tailwind.config.ts       # Tailwind configuration
├── next.config.js          # Next.js configuration
└── package.json

🔧 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

🔐 Authentication

This starter uses Supabase Auth with support for:

• Email/Password authentication
• Social logins (Google, GitHub, etc.)
• Magic link authentication
• Row Level Security (RLS)

💳 Payments

Stripe integration is pre-configured for:

• One-time payments
• Subscription billing
• Webhook handling

🎨 Styling

• Tailwind CSS for utility-first styling
• CSS Variables for theming
• Dark mode support with next-themes
• Responsive design with mobile-first approach

📱 Deployment

Vercel (Recommended)

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

Other Platforms

This starter can be deployed on any platform that supports Node.js:

• Netlify
• Railway
• Render
• DigitalOcean App Platform

🤝 Contributing

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

📄 License

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

🙏 Acknowledgments

• Next.js for the amazing React framework
• Supabase for the backend infrastructure
• Tailwind CSS for the utility-first CSS framework
• Vercel for seamless deployment

---

Built with ❤️ using Next.js and Supabase