Template

A Next.js 13 application with authentication and payments, built with PlanetScale, Drizzle ORM, Lucia, Tailwind and LemonSqueezy

template.mp4

About this project

I used this as a way to play around with the new Next.js app directory, so it is more than likely that things aren't optimal / implemented correctly, so keep this in mind if you decide to fork it and use it for a real app

If you encounter something that's broken, you can message me @amosbastian or create an issue here. Contributions are also very much welcome! 😁

Features

• Nearly everything included in the Next.js app directory
• TypeScript ORM for SQL databases: Drizzle ORM
• Authentication using Lucia
• Database on PlanetScale
• UI components from shadcn/ui
• Blog using MDX and Contentlayer
• Subscriptions using LemonSqueezy
• Styled using Tailwind CSS
• Fetching data using RSCs and tRPC
• Email verification
• Teams with team member management
• RBAC using CASL
• Emails using Mailing and Resend

Known Issues

A list of things not working or implemented right now:

1. Sometimes MySQL will complain about too many connections: restart your Next.js app and it will go away
2. Pricing plans currently aren't synced to the database, which would be ideal
3. RBAC might not work as intended and I haven't tested it enough
4. Not using tRPC in RSCs, so not sure if that works properly
5. Importing MJML breaks the new app router, which is why we put the email sending part in the /pages directory

Running Locally

1. Install dependencies using npm:

npm install

2. Copy .env.example to .env and update the variables

cp .env.example .env

3. Start the development server:

npx nx serve web

Setting up the database

Local

1. Log in to MySQL

mysql -u root

2. Create the database

CREATE DATABASE template;

3. Push your schema

npx drizzle-kit mysql:push

PlanetScale

You don't have to use a local database and use PlanetScale as your only database if you want

TODO:

Authentication

To set up GitHub OAuth you need to

1. Go to https://github.com/settings/developers

2. Click "New OAuth App"

3. Add your authorisation callback URL: http://localhost:4200/api/oauth/github

Emails

You can run Mailing to get a preview of the email in development mode instead of actually sending an email

npx mailing

In production it will use Resend, so you will need to get an API key and verify your domain.

Payments

We are using LemonSqueezy for payments and syncing subscriptions via a webhook (lemonsqueezy/route.ts). If you want to test this locally, then you will need to use something like ngrok to expose the webhook:

npx ngrok http 4200

And then add the webhook URL (e.g. https://abc.eu.ngrok.io/api/lemonsqueezy) to your webhook settings in LemonSqueezy

Asset generation

To generate assets (favicon etc.) with your own logo you can replace logo-mark.svg with your and then use the following command

npm run asset-generator

Thanks to

• shadcn's amazing example repositories and UI library
• Copied a lot of design & emails from Vercel
• Copied tRPC stuff from @ploskovytskyy's repository

License

Licensed under the MIT license.