The easiest way to initialize a new project with Mantine and Next.js.
This is an opinionated template that includes:
- Mantine, the best React UI library
- Next.js, the de-facto metaframework for building React web applications
- tRPC paired with TanStack Query, exclusively for client-side RPCs
- Styling with CSS Modules, the recommended way to style Mantine applications; no TailwindCSS
- TypeScript, of course
- IronSession for authentication
- Drizzle for database access (should be easy to replace with Prisma or Kysely)
- SQLite-file database
- Clone the repository (i.e.
git clone https://github.com/icflorescu/mantine-next.git) - Install dependencies with
pnpm i - Make a copy of
.env.example, name it.envand make sure to set a strong password for the session cookie - Generate the database file with
pnpm db:init - Seed the database with
pnpm db:seed - Start the development server with
pnpm dev.
I've been using Mantine and Next.js for a while to build most of my projects for the past few years.
Next.js is a great framework, but, to put it bluntly, it has its fair share of issues and quirks, and deciding upon how to best structure a project can be a bit of a challenge.
-
Why Drizzle
I've been using Prisma for most of my work, but Drizzle is leaner, faster, and allows you to dynamically build complex queries when needed. -
Why SQLite
Because it's easy to set up, a great choice for prototyping, local development, and - believe it or not - even production (see Turso).
I'm using PostgreSQL for large projects, though, but I didn't want to add a Dockerfile to this project. -
Why not TailwindCSS && ShadcnUI
To cut short a potentially long debate: Mantine already provides enough properly-styled components.
If you're here, you're problably looking for a way to quickly build an application that features truly user-frienly input components out-of-the-box.
If you find this package useful, please consider ❤️ sponsoring my work.
Your sponsorship will help me dedicate more time to maintaining the project and will encourage me to add new features and fix existing bugs.
If you're a company using Mantine, Mantine DataTable, Mantine ContextMenu or other open-source projects I built, I'd love to hear from you.
If you need help in a commercial project, you can also hire my services (see hiring the author below).
Starring the repo on GitHub is also greatly appreciated.
If you want to hire my services, don’t hesitate to drop me a line at the email address listed in my GitHub profile. Mentioning Mantine and Next.js or TanStack will result in a faster response.
Special thanks to Vitaly Rtishchev and the awesome contributors of Mantine for putting countless hours of work into building and maintaining the best React UI library I've ever used.
The MIT License.