This is a Next.js project bootstrapped with create-next-app.
- Tailwind & shadcn/ui configured.
- Kinde integration.
- Prisma configured with MongoDB provider.
- Kinde
user.createdwebhook configured to create a user in the database.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
This project uses next/font to automatically optimize and load Nunito, a custom Google Font.
Copy the .env.example to a .env file. Your values will be found on the Kinde & MongoDB platforms. More information below.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
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.
To learn more about Kinde, take a look at the following resources:
When creating your project, you'll be presented with your environment values, copy & paste them into your .env file.
The only "private" route set up is /app, Kinde will default the KINDE_POST_LOGIN_REDIRECT_URL to point to /dashboards, you will need to change that to /app OR change the folder name to dashboards.
For the user.created webhook, you'll need to set up ngrok to tunnel your localhost to the internet. You can then use the ngrok URL to set up the webhook on the Kinde platform.
- URL:
{Ngrok URL}/api/webhook/kinde/user.created - Event:
user.created
If you update your User schema, you might have to update the webhook to populate the data correctly.
You can configure the middleware.ts to protect routes, instead a (private) route group has been set up with a layout.tsx to protect that group of routes instead. You can configure the middleware.ts to protect individual routes if you wanted to, Kinde has docs for that as well.
This custom helper combines the getUser method from Kinde and the findUnique method from Prisma to get the user from the database. This will add a mongo object to the user object that will continue MongoDB user data. Currently only the _id is added, but you can add more fields if you want.
To learn more about MongoDB, take a look at the following resources:
Prisma has a slightly different way for structuring the connection string to what MongoDB Atlas provides. If you grab the connection string it'll look like this:
mongodb+srv://<username>:<password>@<cluster>.mongodb.net/?retryWrites=true&w=majority&appName=<appName>
Change it to the following:
mongodb+srv://<username>:<password>@<cluster>.mongodb.net/<appName>
IMPORTANT: Try to avoid # or @ in your username & password, and wrap your connection string in quotes in your .env file.
DATABASE_URL="mongodb+srv://<username>:<password>@<cluster>.mongodb.net/<appName>"
The project is set up with Tailwind CSS and shadcn/ui. A default theme has been set up but you can configure the theme here.
A shadcn command is configured in the package.json to pull components into the modules/design-system/ui folder.
pnpm shadcn add <name>The project follows Module Driven Development for the project structure, with a couple of modules already set up for the various parts of the template.