Features

• Authentication - Better Auth with email/password + Google OAuth
• UI Components - shadcn/ui + Tailwind CSS v4
• State Management - React Query + Immer for client state
• API Layer - Hono.js with JWT authentication
• Database - MongoDB with Prisma ORM
• Forms - Formik + Yup validation
• Dark Mode - Built-in with next-themes
• Fast Dev - Turbopack enabled by default

Installation

Using npm

npx init-nextjs-app my-app
cd my-app
npm run dev

Using pnpm

npx init-nextjs-app my-app --pnpm
cd my-app
pnpm dev

Using bun

npx init-nextjs-app my-app --bun
cd my-app
bun dev

Environment Variables

Create a .env file in your project root:

# Database
DATABASE_URL="mongodb+srv://user:pass@cluster/dbname?retryWrites=true&w=majority"

# Better Auth
BETTER_AUTH_SECRET="your-secret-key-here"
BETTER_AUTH_URL="http://localhost:3000/api/auth"
NEXT_PUBLIC_API_URL="http://localhost:3000"

# OAuth (optional)
GOOGLE_CLIENT_ID=""
GOOGLE_CLIENT_SECRET=""

Tech Stack

| Category | Technology | |----------|------------| | Framework | Next.js 15 (App Router) | | Language | TypeScript | | Styling | Tailwind CSS v4 | | UI Components | shadcn/ui | | Authentication | Better Auth | | Database ORM | Prisma | | API Framework | Hono.js | | State Management | React Query + Immer | | Forms | Formik + Yup | | HTTP Client | ky |

Project Structure

src/
├── app/
│   ├── api/[[...route]]/    # Hono API routes
│   │   ├── controllers/     # Business logic
│   │   ├── middleware/      # Auth middleware
│   │   ├── routes/          # Route definitions
│   │   ├── schemas/         # Zod validation
│   │   └── utils/           # Response helpers
│   ├── sign-in/             # Auth pages
│   └── sign-up/
├── components/
│   ├── auth/                # Auth components
│   ├── providers/           # React Query provider
│   └── ui/                  # shadcn components
├── lib/
│   ├── api/                 # API client (ky)
│   ├── auth.ts              # Better Auth config
│   ├── auth-client.ts       # Client auth helper
│   └── prisma.ts            # Prisma client
└── store/                   # Global state (React Query)

Quick Start

1. Set up your MongoDB database and add the connection string to .env

2. Push the Prisma schema:

   npx prisma db push

3. Start development server:

   npm run dev

4. Open http://localhost:3000