A Next.js 13 application with authentication and payments, built with PlanetScale, Drizzle ORM, Lucia, Tailwind and LemonSqueezy
template.mp4
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! 😁
- 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
A list of things not working or implemented right now:
- Sometimes MySQL will complain about too many connections: restart your Next.js app and it will go away
- Pricing plans currently aren't synced to the database, which would be ideal
- RBAC might not work as intended and I haven't tested it enough
- Not using tRPC in RSCs, so not sure if that works properly
- Importing MJML breaks the new app router, which is why we put the email sending part in the
/pagesdirectory
- Install dependencies using npm:
npm install- Copy
.env.exampleto.envand update the variables
cp .env.example .env- Start the development server:
npx nx serve web- Log in to MySQL
mysql -u root- Create the database
CREATE DATABASE templ
769B
ate;- Push your schema
npx drizzle-kit mysql:pushYou don't have to use a local database and use PlanetScale as your only database if you want
TODO:
To set up GitHub OAuth you need to
-
Click "New OAuth App"
-
Add your authorisation callback URL: http://localhost:4200/api/oauth/github
You can run Mailing to get a preview of the email in development mode instead of actually sending an email
npx mailingWe 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 4200And then add the webhook URL (e.g. https://abc.eu.ngrok.io/api/lemonsqueezy) to your webhook settings in LemonSqueezy
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- shadcn's amazing example repositories and UI library
- Copied a lot of design & emails from Vercel
- Copied tRPC stuff from @ploskovytskyy's repository
Licensed under the MIT license.