Convex + Clerk Next.js Starter

A modern SaaS boilerplate that combines Next.js 16, Clerk authentication, and Convex real-time data, enabling you to launch dashboards, billing flows, and synced user records with minimal setup.

Features

• ✅ Pre-wired Clerk auth (UI + JWT templates) with Convex validation
• ✅ Convex schema + mutations to keep a users table synced via Clerk webhooks
• ✅ HTTP endpoint (/clerk-users-webhook) that verifies Svix signatures
• ✅ Shared React provider (ConvexProviderWithClerk) for safe Convex hooks
• ✅ Tailwind-ready UI primitives, theme toggling, and placeholder public/dashboard routes

See docs/setup.md for the full walk-through.

Tech Stack

• Next.js App Router (Turbopack dev server)
• Clerk for auth UI and JWT issuance
• Convex for data, server functions, and webhooks
• Tailwind CSS + shadcn/ui components
• pnpm for dependency management

Getting Started

1. Clone the repository template to your desired directory.

2. After cloning the repository, open a terminal in your cloned repository, then run the setup script to create a new project by executing:

./setup.bash

3. Install the necessary packages by executing the command below:

pnpm install

4. After installing the dependencies, create an account and project in Convex, after which you can execute the command below and select your project:

pnpm convex:dev
or
pnpm dlx convex dev

5. Then, we need to create an account in Clerk, which has simple steps to follow in their documentation. Make sure to copy the environment variables mentioned in their documentation and paste them into the .env.local file created by Convex.

6. Once the Convex and Clerk environment variables are saved in .env.local, we need to set up the webhook. Go to the HTTP File and copy the path (/clerk-users-webhook), then append it to your NEXT_PUBLIC_CONVEX_URL, and change .cloud to .site, resulting in something like this: https://..x.convex.site/clerk-users-webhook. After obtaining that value, you can paste it into the Clerk webhook settings.

7. Make sure you have updated the Convex environment variables; they should include CLERK_JWT_ISSUER_DOMAIN and CLERK_WEBHOOK_SECRET set up there.

8. After configuring both Clerk and Convex, you can execute:

pnpm dev

Or launch everything at once—Convex dev server, Convex dashboard, and the app—with:

pnpm start:all

Open http://localhost:3000 to view the public marketing page. Use the Clerk modal to sign in. Convex verifies the JWT, saves user details via the webhook, and enables you to begin querying the synced records for dashboards.

Useful Scripts

Command	Description
pnpm dev	Start Next.js (Turbopack).
pnpm build	Production build.
pnpm start	Run the built Next.js app.
pnpm lint	ESLint.
pnpm convex:dev	Start Convex dev server + hot reload functions.

Documentation

• Setup Guide
• Clerk Next.js Quickstart
• Convex Clerk Auth
• Convex Database Schemas

Contributing / Customizing

1. Fork or clone the repo.
2. Update convex/schema.ts and run pnpm convex:dev to sync schema.
3. Extend convex/users.ts with more metadata (roles, billing state, etc.).
4. Build dashboard routes under app/(dashboard)/.
5. Add billing integrations (Stripe, Lemon Squeezy, etc.) – place hooks in Convex actions/mutations for a unified backend.

Pull requests are welcome! This template is meant to stay lean but pragmatic; If something slows down your setup, feel free to improve it and share.