-> View demo: news.mongodb.com

Next.js with MongoDB and Better Auth

A modern full-stack template for building React applications using Next.js, MongoDB, and Better Auth for authentication. Features a Hacker News-style post submission and voting system with optimistic updates, server actions, and seamless GitHub OAuth integration.

Features

• 🔐 Authentication: GitHub OAuth integration with Better Auth
• 📝 Post System: Hacker News-style post submission and voting
• ⚡ Optimistic Updates: Real-time UI updates with React's useOptimistic
• 🎨 Modern UI: Built with shadcn/ui and Tailwind CSS
• 📱 Responsive Design: Mobile-first design with dark mode support
• 🗄️ MongoDB Integration: Native MongoDB driver with optimized queries
• 🔄 Server Actions: Form handling without client-side API calls
• 📊 Real-time Status: Database connection monitoring
• 🚀 Production Ready: TypeScript, ESLint, and Vercel deployment optimized

Getting Started

Click the "Deploy" button to clone this repo, create a new Vercel project, setup the MongoDB integration, and provision a new MongoDB database:

Local Setup

Installation

Install the dependencies:

npm install

Development

Create a .env file in the project root

cp .env.example .env

Configure environment variables

Update the .env file with your configuration:

# MongoDB connection string from Atlas Dashboard
MONGODB_URI=mongodb+srv://<username>:<password>@<cluster-url>/<database>?retryWrites=true&w=majority
MONGODB_DB=better-auth

# Better Auth configuration
BETTER_AUTH_URL=http://localhost:3000
BETTER_AUTH_SECRET=your-secure-secret-key-here-minimum-32-characters

# GitHub OAuth credentials (create at https://github.com/settings/developers)
GITHUB_CLIENT_ID=your-github-client-id
GITHUB_CLIENT_SECRET=your-github-client-secret

Setup GitHub OAuth

1. Go to GitHub Developer Settings
2. Create a new OAuth App
3. Set Authorization callback URL to: http://localhost:3000/api/auth/callback/github
4. Copy the Client ID and Client Secret to your .env file

Setup database indexes (optional for production)

npm run setup-indexes

Start the development server

npm run dev

Open http://localhost:3000 with your browser to see the result.

Tech Stack

• Framework: Next.js 15 with App Router
• Database: MongoDB with native Node.js driver
• Authentication: Better Auth with GitHub OAuth
• Styling: Tailwind CSS with shadcn/ui
• Forms: React Hook Form with Zod validation
• Icons: Lucide React
• Notifications: Sonner
• Deployment: Vercel

Project Structure

├── app/                    # Next.js App Router
│   ├── api/auth/          # Better Auth API routes
│   ├── login/             # Login page
│   ├── signup/            # Signup page
│   └── page.tsx           # Home page
├── components/            # React components
│   ├── ui/               # shadcn/ui components
│   ├── PostItem.tsx      # Individual post with voting
│   ├── PostListServer.tsx # Server-side post list
│   ├── PostSection.tsx   # Post section wrapper
│   └── ...               # Other components
├── lib/                  # Core utilities
│   ├── auth.ts          # Better Auth configuration
│   ├── auth-client.ts   # Client-side auth methods
│   ├── mongodb.ts       # Database connection
│   ├── posts.ts         # Post data functions
│   ├── actions.ts       # Server actions
│   └── schemas.ts       # Zod validation schemas
└── scripts/             # Utility scripts
    └── setup-indexes.mjs # Database index setup

Key Features Explained

Authentication System

• GitHub OAuth: Seamless login with GitHub accounts
• Session Management: Secure session handling with MongoDB storage
• User Profiles: Automatic GitHub username integration

Post Management

• Real-time Voting: Optimistic UI updates using React's useOptimistic
• Server Actions: Form submissions without client-side API calls
• Caching: Strategic caching with Next.js unstable_cache and revalidation
• Pagination: URL-based pagination with smooth navigation

Modern React Patterns

• Server Components: SEO-friendly server-side rendering
• Client Components: Interactive elements with proper hydration boundaries
• Suspense: Loading states for better user experience
• Form Validation: Type-safe forms with React Hook Form and Zod

Learn More

To learn more about the technologies used in this template:

• Next.js Documentation - learn about Next.js features and API
• Better Auth Documentation - authentication and session management
• MongoDB Documentation - database features and APIs
• shadcn/ui Documentation - component library and design system
• Tailwind CSS Documentation - utility-first CSS framework

Deploy on Vercel

Commit and push your code changes to your GitHub repository to automatically trigger a new deployment.