Welcome to your Convex + Next.js + Convex Auth app

This is a Convex project created with npm create convex.

After the initial setup (<2 minutes) you'll have a working full-stack app using:

• Convex as your backend (database, server logic)
• Convex Auth for your authentication implementation
• React as your frontend (web page interactivity)
• Next.js for optimized web hosting and page routing
• Tailwind and shadcn/ui for building great looking accessible UI fast

Get started

If you just cloned this codebase and didn't use npm create convex, run:

npm install
npm run dev

If you're reading this README on GitHub and want to use this template, run:

npm create convex@latest -- -t nextjs-convexauth-shadcn

The app

The app is a basic multi-user chat. Walkthrough of the source code:

• convex/auth.ts configures the available authentication methods
• convex/messages.ts is the chat backend implementation
• middleware.ts determines which pages require sign-in
• app/layout.tsx is the main app layout
• app/(splash)/page.tsx is the splash page (doesn't require sign-in)
• app/product/layout.tsx is the "product" layout for the product page (requires sign-in)
• app/signin/page.tsx is the sign-in page
• app/product/Chat/Chat.tsx is the chat frontend

Configuring other authentication methods

To configure different authentication methods, see Configuration in the Convex Auth docs.

Learn more

To learn more about developing your project with Convex, check out:

• The Tour of Convex for a thorough introduction to Convex principles.
• The rest of Convex docs to learn about all Convex features.
• Stack for in-depth articles on advanced topics.

Join the community

Join thousands of developers building full-stack apps with Convex:

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

• Join the Convex Discord community to get help in real-time.
• Follow Convex on GitHub, star and contribute to the open-source implementation of Convex.