Next.js 15 Starter Kit

A modern, feature-rich starter template for building production-ready applications with Next.js 15, Tailwind CSS, and TypeScript.

Features

Core Technologies

• ⚡ Next.js 15 - The latest version with App Router
• 🎨 Tailwind CSS - Utility-first CSS framework
• 📘 TypeScript - Type-safe code
• 🔒 Authentication - Clerk integration with persistent authorization toggle
• 🎭 Shadcn/ui - Beautiful and accessible components
• 💾 Convex DB - Real-time database with built-in file storage and serverless functions
• 💳 Polar.sh - Open-source solution for managing subscriptions and payments

Performance Optimizations

• 🚀 Route Prefetching - Instant page transitions for dashboard, playground, and auth pages
• 🖼️ Optimized Images - Eager loading for critical images
• 🌓 Dark/Light Mode - System-aware theme switching with custom gradients
• 📱 Responsive Design - Mobile-first approach
• 🔄 Real-time Updates - Powered by Convex DB's real-time capabilities

Developer Experience

• 🧩 Component Library - Pre-built, customizable components
• 🎮 AI Playground - Built-in AI chat interface
• 📊 Dashboard Template - Ready-to-use admin interface with subscription management
• 🔍 SEO Optimized - Meta tags and sitemap generation

Convex DB Integration

To set up your Convex database, visit: https://convex.link/rasmicstarter

Quick Start

1. Clone the repository:

git clone https://github.com/michaelshimeles/nextjs14-starter-template.git

2. Install dependencies:

bun install

3. Set up environment variables:

cp .env.example .env.local

4. Configure your environment variables:

# Authentication (Clerk)
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

# Convex
NEXT_PUBLIC_CONVEX_URL=
CONVEX_DEPLOYMENT=
CONVEX_ADMIN_KEY=

# Polar.sh
POLAR_WEBHOOK_SECRET=

# Frontend
NEXT_PUBLIC_BASE_URL=http://localhost:3000

# Optional: AI Integration
OPENAI_API_KEY=

5. Run the development server:

bun run dev

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

Project Structure

├── app/
│   ├── (auth)/         # Authentication routes
│   ├── (marketing)/    # Marketing pages
│   ├── api/           # API routes
│   ├── dashboard/     # Dashboard pages
│   └── playground/    # AI Playground
├── components/
│   ├── homepage/     # Landing page components
│   ├── shared/       # Shared UI components
│   └── wrapper/      # Layout wrappers and navigation
├── config/           # Configuration files
├── convex/          # Convex DB schema and functions
├── lib/             # Utility functions
├── public/          # Static assets
│   ├── images/      # Image assets
│   └── svg/         # SVG assets
└── styles/          # Global styles

Available Scripts

• bun run dev - Start development server
• bun run build - Build for production
• bun run start - Start production server
• bun run lint - Run ESLint
• bun run format - Format code with Prettier

Sponsors and Supporters

Special thanks to Convex for their sponsorship and support in making this starter kit possible. Their real-time database and file storage solutions have been instrumental in creating a powerful foundation for modern web applications.

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some 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.

Support

If you find this template helpful, please give it a ⭐️ on GitHub!