Next Boilerplate

This is a cool boilerplate for Next.js projects. It includes setup for the following tools:

Framework

• Next.js

DX

• TypeScript
• Pnpm
• ESLint
• Prettier
• Husky

Backend (sort of)

• TRPC
• Clerk
• Prisma
• PlanetScale
• Uploadthing

Back-front integration

• React Query
• Zod
• React Hook Form

UI

• Tailwind CSS
• Shadcn/UI
• Sonner
• NProgress
• Recoil
• Moment.js (for now, might be replaced with Date-fns)
• Lucide Icons

How to start

Clone the repo

Do I have to tell you how?

Install dependencies

• run pnpm i to install all dependencies

Create Clerk app

• Visit Clerk and create an account
• Create a new project
• Copy the CLERK_SECRET_KEY and NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY variables and paste them into .env.local

Create PlanetScale database

• Visit PlanetScale and create an account
• Create a new database and set framework to Prisma
• Copy the DATABASE_URL variable and paste it into .env.local
• run pnpm prisma db push to push the state of schema.prisma to the database

Create Uploadthing App

• Visit Uploadthing and create an account
• Create a new app
• Copy the UPLOADTHING_SECRET and UPLOADTHING_APP_ID variables and paste them into .env.local

More env variables

Along with your Clerk, Uploadthing, and Database env variables, you will need to add the following:

/* TBD */

Run the app

• run pnpm dev to start the app
• Test Clerk authentication and tRPC works by following instructions

Start building

Happy hacking.