Full-Stack Next.js Template

A production-ready full-stack template with Next.js, Neon Postgres, Auth.js, Drizzle ORM, and optional Redis caching.

Features

• Next.js 15 with App Router and React Server Components
• TypeScript for type safety
• Neon Postgres serverless database
• Drizzle ORM with type-safe queries
• Auth.js (NextAuth v5) with GitHub and Google OAuth
• Upstash Redis for caching (optional)
• Tailwind CSS for styling
• ESLint for code quality
• Optimized for Vercel deployment

Quick Start

1. Environment Setup

Copy the example environment file:

cp .env.example .env

Fill in your environment variables:

• DATABASE_URL - Your Neon Postgres connection string
• AUTH_SECRET - Generate with openssl rand -base64 32
• OAuth credentials (GitHub and/or Google)
• Redis credentials (optional)

2. Database Setup

Push the database schema:

pnpm db:push

3. Start Development

pnpm dev

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

Database Management

Generate Migrations

pnpm db:generate

Apply Migrations

pnpm db:migrate

Push Schema (Development)

pnpm db:push

Open Drizzle Studio

pnpm db:studio

Authentication

This template includes Auth.js with support for:

• GitHub OAuth
• Google OAuth
• Database sessions with Drizzle adapter

To add more providers, edit auth.config.ts.

Setting up OAuth

GitHub:

1. Go to GitHub Settings → Developer settings → OAuth Apps
2. Create a new OAuth App
3. Set callback URL: http://localhost:3000/api/auth/callback/github
4. Add GITHUB_ID and GITHUB_SECRET to .env

Google:

1. Go to Google Cloud Console
2. Create OAuth credentials
3. Set callback URL: http://localhost:3000/api/auth/callback/google
4. Add GOOGLE_ID and GOOGLE_SECRET to .env

Redis (Optional)

Redis is optional. If you don't configure it, the app will work without caching.

To enable Redis:

1. Create an Upstash Redis database at upstash.com
2. Add credentials to .env:

   UPSTASH_REDIS_REST_URL=your-url
   UPSTASH_REDIS_REST_TOKEN=your-token
   

Use the helper function to check availability:

import { redis, isRedisAvailable } from "@/lib/redis";

if (isRedisAvailable()) {
  await redis!.set("key", "value");
}

Project Structure

├── app/                # Next.js app directory
│   ├── api/           # API routes
│   └── ...            # Pages and layouts
├── lib/               # Shared utilities
│   ├── db/            # Database schema and connection
│   └── redis.ts       # Redis client (optional)
├── auth.ts            # Auth.js configuration
├── auth.config.ts     # Auth.js provider config
├── middleware.ts      # Auth middleware
└── drizzle.config.ts  # Drizzle ORM configuration

Deployment

Vercel (Recommended)

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

Vercel will automatically:

• Install dependencies
• Run the build
• Deploy to production

Environment Variables for Production

Make sure to add all variables from .env.example to your Vercel project settings.

Update AUTH_URL to your production URL.

Scripts

• pnpm dev - Start development server
• pnpm build - Build for production
• pnpm start - Start production server
• pnpm lint - Run ESLint
• pnpm typecheck - Check TypeScript types
• pnpm test - Run tests
• pnpm verify - Run all checks (lint + typecheck + test)
• pnpm db:generate - Generate database migrations
• pnpm db:migrate - Apply migrations
• pnpm db:push - Push schema to database
• pnpm db:studio - Open Drizzle Studio

Tech Stack

• Next.js - React framework
• TypeScript - Type safety
• Neon - Serverless Postgres
• Drizzle ORM - TypeScript ORM
• Auth.js - Authentication
• Upstash Redis - Serverless Redis
• Tailwind CSS - Styling
• Vercel - Deployment

Learn More

• Next.js Documentation
• Drizzle ORM Documentation
• Auth.js Documentation
• Neon Documentation

License

MIT