Next.js Full-Stack Starter Kit

A production-ready Next.js starter template with essential integrations for shipping full-stack applications insanely fast.

🚀 Features

• Authentication - Ready-to-use authentication with NextAuth.js
• Database & ORM - Prisma ORM setup with your choice of database
• Payment Processing - Stripe integration with webhook handling
• UI Components - shadcn/ui components with Tailwind CSS
• Form Handling - React Hook Form with Zod validation
• Data Fetching - TanStack Query (React Query) integration
• Email Services - SendGrid/Resend integration
• Icons - Lucide icons/React Icons library

🛠️ Tech Stack

• Next.js
• NextAuth.js
• Prisma
• Stripe
• TanStack Query
• React Hook Form
• shadcn/ui
• Tailwind CSS
• Zod
• Lucide Icons

🚦 Quick Start Guide

1. Install dependencies:

   npm install

2. Create a .env file in the root directory and copy contents from .env.local. Then delete .env.local. Read carefully instructions in the file.

3. Set up required credentials:

   • Create a Google Cloud project for authentication
   • Set up a database on Supabase or Neon.tech
   • Configure Stripe for payments
   • Set up SendGrid or Resend for emails

4. Initialize the database:

   npx prisma db push
   npx prisma generate

5. Start the development server:

   npm run dev

6. Test authentication by signing in

7. Customize your application:

   • Update app name in package.json
   • Modify metadata in utils file
   • Search for "TODO" in the entire codebase and update accordingly

📝 Environment Variables

Create a .env file with the following:

Authentication

NEXTAUTH_URL=
NEXTAUTH_SECRET=
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

Database

DATABASE_URL=

Stripe

STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=

Email (Choose one)

SENDGRID_API_KEY=
RESEND_API_KEY=

🔒 Authentication Setup

1. Go to Google Cloud Console
2. Create a new project
3. Navigate to APIs & Services > Credentials
4. Configure OAuth consent screen
5. Create OAuth 2.0 Client ID
6. Add authorized redirect URIs:
   • http://localhost:3000/api/auth/callback/google (development)
   • https://your-domain.com/api/auth/callback/google (production)

💾 Database Setup

1. Choose your database provider, either works:
   • Supabase
   • Neon
2. Create a new project
3. Copy the database connection URL
4. Update DATABASE_URL in your .env file

💳 Stripe Integration

The starter includes a pre-configured Stripe webhook handler (/api/webhooks/route.js) for processing payments. To set up:

1. Create a Stripe account
2. Get your API keys from the dashboard
3. Set up webhook endpoints
4. Update your .env file with Stripe credentials

📦 Project Structure

src/
├── app/
│   ├── api/          # API routes including auth and webhooks
│   ├── components/   # UI components
│   └── ...
├── lib/             # Utility functions and configurations
├── prisma/          # Database schema
└── ...

⚙️ Key Files

• app/api/auth/[...nextauth]/route.js - Authentication configuration
• app/api/webhooks/route.js - Stripe webhook handler
• lib/auth.js - Authentication utilities
• lib/stripe.js - Stripe configuration
• prisma/schema.prisma - Database schema

🔍 Common Tasks

• Adding New API Routes: Create new files in app/api/
• Construct Your Schema: Update prisma/schema.prisma and run npx prisma db push
• UI Components: Find pre-built components in app/components/ui
• Authentication: Add providers in app/api/auth/[...nextauth]/route.js

🐛 Troubleshooting

• Authentication Issues: Verify Google Cloud credentials and redirect URIs
• Database Errors: Check DATABASE_URL and ensure Prisma schema is synced
• Stripe Webhook Errors: Verify webhook secret and endpoint configuration

📚 Additional Resources

• Next.js Documentation
• Prisma Documentation
• Stripe Documentation
• NextAuth.js Documentation

---

Built with ❤️ by Run @runbuilds