🚀 Next.js Modern Stack Template

A Next.js template that combines commonly used tools and libraries for building full-stack web applications. This stack is specifically designed to be optimized for AI coding assistants like Cursor.

🎯 Overview

This template includes Next.js 14 with the App Router, Supabase for the database, Resend for transactional emails, and optional integrations with various AI providers and AWS services.

⚠️ Note: This is my personal template with tools that I personally have experience with and think are solid options for building modern full-stack web application. Your preferences very likely differ, so feel free to fork and modify it for your own use. I won't be accepting pull requests for additional features, but I'll be happy to help you out if you have any questions.

✨ Features

🏗️ Core Architecture

• Next.js 14 - React framework with App Router
• TypeScript - Type safety throughout
• tRPC - End-to-end type-safe APIs
• Prisma - Database ORM and schema management
• NextAuth.js - Authentication with Prisma adapter
• Supabase - Postgres database with realtime and auth

🎨 UI & Styling

• Tailwind CSS - Utility-first CSS framework
• Framer Motion - Animation library
• Lucide Icons - Icon set
• Dark mode with Tailwind CSS

🛠️ Development Tools

• Storybook - Component development environment
• Geist Font - Typography by Vercel

🤖 AI & Background Jobs

• Multiple AI integrations available:
  • OpenAI - GPT-4 and o-series models
  • Anthropic - Sonnet-3.5
  • Perplexity - Web search models
  • Groq - Fast inference
• Inngest - Background jobs and scheduled tasks

🔧 Infrastructure & Services

• Resend - Email delivery
• AWS S3 - File storage
• Supabase - Primary database (Note that I don't directly use the supabase client in this template, so you can switch out supabase with other database providers via the DATABASE_URL and DIRECT_URL environment variables.)

🔔 Additional Features

• react-toastify - Toast notifications
• Utility functions for common operations
• TypeScript and ESLint configuration included

🚀 Getting Started

1. Fork this repository
2. Install dependencies:

npm install

3. Copy .env.example to .env and configure your environment variables
4. Set up your database:

npx prisma migrate dev

5. Start the development server:

npm run dev

Visit http://localhost:3000 to see your app.

📁 Project Structure

• app/ - Next.js app router pages and API routes
• src/
  • components/ - UI components
  • lib/ - Utilities and configurations
    • api/ - tRPC routers
    • utils/ - Shared utilities
  • stories/ - Storybook files
• prisma/ - Database schema

🚀 Deployment

This template is optimized for deployment on Vercel.

Database Setup

1. Create a new Supabase project at supabase.com
2. Get your database connection strings from Supabase:
   • Project Settings → Database
   • Copy both the URI (for DATABASE_URL) and Direct Connection (for DIRECT_URL)

Vercel Setup

1. Push your code to GitHub
2. Go to vercel.com/new
3. Import your repository
4. Configure the following environment variables:
   • DATABASE_URL - Your Supabase database URL
   • DIRECT_URL - Your Supabase direct connection URL
   • NEXTAUTH_SECRET - Generate with openssl rand -base64 32
   • NEXTAUTH_URL - Your production URL (e.g., https://your-app.vercel.app)
   • Add any other variables from .env.example that you're using
5. Deploy!

Post-Deployment

1. Run database migrations in the Vercel deployment:

npx vercel env pull .env.production.local  # Pull production env vars
npx prisma migrate deploy                  # Deploy migrations to production

2. Set up your custom domain in Vercel (optional):
   • Go to your project settings
   • Navigate to Domains
   • Add your domain and follow the DNS configuration instructions

📝 License

MIT License