This is a modern, feature-rich starter kit that helps you build production-ready applications using Next.js 15, Tailwind CSS, Shadcn/ui, and TypeScript.
You can use this starter kit to accelerate your development process. It offers pre-configured settings and follows best practices. This allows you to concentrate on building unique features rather than handling repetitive setup tasks.
Features
⚡ Next.js 15: Utilizes the latest version with the App Router for advanced routing.
🎨 Tailwind CSS: Utility-first CSS framework for rapid UI development.
📘 TypeScript: Type-safe code for better maintainability.
🔒 Authentication: Integrates Clerk with a persistent authorization toggle.
🎭 Shadcn/ui: Beautiful and accessible UI components.
💾 Convex DB: Real-time database with built-in file storage and serverless functions.
💳 Polar.sh: Includes an open-source solution for managing subscriptions and payments.
🚀 Route Prefetching: Delivers instant page transitions for dashboard, playground, and auth pages.
🌓 Dark/Light Mode: Features system-aware theme switching with custom gradients.
📱 Responsive Design: Adopts a mobile-first approach for broad device compatibility.
🔄 Real-time Updates: Leverages Convex DB’s real-time capabilities.
🧩 Component Library: Contains pre-built, customizable components.
🎮 AI Playground: Includes a built-in AI chat interface.
📊 Dashboard Template: Offers a ready-to-use admin interface with subscription management.
🔍 SEO Optimized: Generates meta tags and sitemaps for better search engine visibility.
Use Cases
- SaaS Applications: Build software-as-a-service products with integrated authentication (Clerk), real-time database (Convex DB), and subscription management (Polar.sh).
- AI-Powered Tools: Develop applications with AI capabilities using the built-in AI Playground and OpenAI integration.
- Admin Dashboards: Create internal tools or admin panels quickly with the provided dashboard template and Shadcn/ui components.
- E-commerce Platforms: Develop e-commerce sites that require robust user management, real-time inventory updates, and payment processing.
- Content Platforms: Build blogs or content-driven websites with SEO optimization, responsive design, and fast page loads.
Installation
1. Clone the repository:
git clone https://github.com/michaelshimeles/nextjs14-starter-template.git2. Install dependencies. This project uses bun as the package manager:
bun install3. Set up environment variables. Copy the example file:
cp .env.example .env.local4. Configure your environment variables in .env.local. You will need keys for Clerk, Convex, Polar.sh, and optionally OpenAI:
# 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=To set up your Convex database, visit: https://convex.link/rasmicstarter
5. Run the development server:
bun run devYour application will be available at http://localhost:3000.
Related Resources
- Next.js Documentation: The official Next.js documentation provides detailed information about the framework.
https://nextjs.org/docs - Tailwind CSS Documentation: Learn more about Tailwind CSS and its utility classes.
https://tailwindcss.com/docs - Convex DB Documentation: Explore the features and capabilities of Convex DB.
https://docs.convex.dev/ - Clerk Documentation: Find guides and API references for Clerk authentication.
https://clerk.com/docs
Preview
