Skip to content

harsh661/nextjs-clerk-convex-starter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

17 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Next.js Clerk Convex Starter

A clean, minimal starter to build authenticated apps with:

  • Next.js (App Router)
  • Clerk (Authentication)
  • Convex (Backend + Database)

Includes protected routes, automatic user sync, and a solid foundation to start building real apps.


πŸ“Έ Preview

Landing Page

localhost_3000_dashboard (1)

Authentication

Screenshot_2026-04-05_100637

Dashboard (Protected)

localhost_3000_dashboard


✨ Features

  • πŸ” Authentication with Clerk
  • 🧱 Convex backend with schema & functions
  • πŸ”„ Automatic user sync (Clerk β†’ Convex)
  • πŸ›‘οΈ Route protection via middleware
  • 🎯 Clean app structure (auth vs app separation)
  • ⚑ Minimal, production-ready UI
  • πŸ§ͺ Ready for queries & mutations

πŸ“ Project Structure

.
β”œβ”€β”€ convex/              # Convex backend (schema, functions)
β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ app/
β”‚   β”‚   β”œβ”€β”€ (auth)/      # Sign-in / Sign-up
β”‚   β”‚   β”œβ”€β”€ (app)/       # Protected routes (dashboard)
β”‚   β”‚   β”œβ”€β”€ globals.css  # Global css file
β”‚   β”‚   └── page.tsx     # Public landing page
β”‚   β”œβ”€β”€ components/
β”‚   β”‚   β”œβ”€β”€ providers/   # Convex provider
β”‚   β”‚   └── shared/      # UserSync.ts
β”‚   └── middleware.ts    # Clerk route protection
β”œβ”€β”€ .env.example
└── README.md

πŸ› οΈ Prerequisites

Before getting started, make sure you have the following:

  • Node.js v18 or higher
  • A Clerk account with an application set up
  • A Convex account with a project created

⚑ Getting Started

1. Clone the repo

git clone https://github.com/harsh661/nextjs-clerk-convex-starter.git
cd nextjs-clerk-convex-starter

2. Install dependencies

npm install

3. Set up environment variables

cp .env.example .env.local

Then fill in .env.local:

# Convex
CONVEX_DEPLOYMENT=
NEXT_PUBLIC_CONVEX_URL=
NEXT_PUBLIC_CONVEX_SITE_URL=

# Clerk
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

NEXT_PUBLIC_CLERK_SIGN_IN_FORCE_REDIRECT_URL=/dashboard
NEXT_PUBLIC_CLERK_SIGN_UP_FORCE_REDIRECT_URL=/dashboard

NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/

⚠️ Important β€” Convex + Clerk Integration

In your Convex Dashboard β†’ Settings β†’ Environment Variables, add:

CLERK_JWT_ISSUER_DOMAIN=https://your-clerk-domain.clerk.accounts.dev

4. Run Convex

npx convex dev

5. Start the app

npm run dev

Visit β†’ http://localhost:3000


πŸ” Auth Flow

Route Access
/ Public
/sign-in, /sign-up Public
/dashboard Protected

Route protection is handled in middleware.ts.


πŸ”„ User Sync

Users are automatically synced to Convex on sign-in. No manual setup required.


πŸ“¦ Environment Variables

.env.local

Variable Description
CONVEX_DEPLOYMENT Your Convex deployment slug
NEXT_PUBLIC_CONVEX_URL Public Convex URL
NEXT_PUBLIC_CONVEX_SITE_URL Public Convex site URL
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY Clerk publishable key
CLERK_SECRET_KEY Clerk secret key
NEXT_PUBLIC_CLERK_SIGN_IN_URL Path for the sign-in page
NEXT_PUBLIC_CLERK_SIGN_UP_URL Path for the sign-up page
NEXT_PUBLIC_CLERK_SIGN_IN_FORCE_REDIRECT_URL Always redirects here after sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_FORCE_REDIRECT_URL Always redirects here after sign-up
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL Fallback redirect if no target after sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL Fallback redirect if no target after sign-up

Convex Dashboard

Variable Description
CLERK_JWT_ISSUER_DOMAIN Your Clerk JWT issuer domain

πŸ“ License

MIT

About

Build authenticated apps faster with Next.js, Clerk, and Convex. A clean starter with protected routes, automatic user sync, and a scalable foundation.

Topics

Resources

License

Stars

Watchers

Forks

Contributors