-> 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 email/password authentication.

Features

• 🔐 Authentication: Email/password authentication 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:

1
npm install

Development

Create a .env file in the project root

1
cp .env.example .env

Configure environment variables

Update the .env file with your configuration:

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

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

Setup database indexes (optional for production)

1
npm run setup-indexes

Start the development server

1
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 email/password
• Styling: Tailwind CSS with shadcn/ui
• Forms: React Hook Form with Zod validation
• Icons: Lucide React
• Notifications: Sonner
• Deployment: Vercel

Project Structure

1
├── app/                    # Next.js App Router
2
│   ├── api/auth/          # Better Auth API routes
3
│   ├── login/             # Login page
4
│   ├── signup/            # Signup page
5
│   └── page.tsx           # Home page
6
├── components/            # React components
7
│   ├── ui/               # shadcn/ui components
8
│   ├── PostItem.tsx      # Individual post with voting
9
│   ├── PostListServer.tsx # Server-side post list
10
│   ├── PostSection.tsx   # Post section wrapper
11
│   └── ...               # Other components
12
├── lib/                  # Core utilities
13
│   ├── auth.ts          # Better Auth configuration
14
│   ├── auth-client.ts   # Client-side auth methods
15
│   ├── mongodb.ts       # Database connection
16
│   ├── posts.ts         # Post data functions
17
│   ├── actions.ts       # Server actions
18
│   └── schemas.ts       # Zod validation schemas
19
└── scripts/             # Utility scripts
20
    └── setup-indexes.mjs # Database index setup

Key Features Explained

Authentication System

• Email/Password: Secure login with email and password
• Form Validation: Password requirements and email validation
• Session Management: Secure session handling with MongoDB storage
• User Profiles: User account management with Better Auth

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.