The Next.js Mantine Template is a full-stack Next.js boilerplate that combines Mantine UI, TypeScript, and a curated set of libraries to jump-start production web applications.
What is the Next.js Mantine Template?
It is a fully-featured full-stack Next.js template built with Mantine UI and TypeScript. It takes a developer's project idea as input and produces a working web application skeleton with server-side authentication, smart form components, i18n, SEO, and CI/CD workflows. The template runs on Next.js and requires Node.js v14.16 or newer. It is maintained by the GitHub user cnoside.
Key Features
- Mantine UI — Component library that provides the styling system, with all UI components ready to use out of the box.
- React Hook Form smart forms — Forms are built using React Hook Form's Smart Form Component pattern, paired with yup for schema validation.
- React Query — Data fetching and server-state management are handled by React Query, along with axios for HTTP requests.
- next-seo — SEO management is integrated via next-seo, allowing per-page meta tags and structured data.
- next-i18next — Internationalization is supported with next-i18next for multi-language applications.
- Server-side authentication — Auth is implemented using Next.js data fetching methods, with authenticated sessions stored in React Context.
- Next.js Layouts — Page-specific layouts can be rendered using the getLayout function, providing a consistent page structure.
- GitHub Actions — CI/CD workflows are included for automated testing and deployment.
- Developer tools — commitlint, husky, eslint, and prettier are pre-configured to enforce code quality and commit conventions.
- pnpm — The template uses pnpm as its package manager.
Who is it for?
- Next.js developers — who want a pre-configured full-stack starter with Mantine UI and TypeScript, so they can skip the setup phase and start building features immediately.
- Full-stack teams — that need a consistent project structure with auth, forms, SEO, i18n, and CI/CD already wired up.
- Indie hackers and product builders — who want a production-ready base for their next web app without spending days on configuration.
What can you do with it?
- Start a new SaaS application: Set up user authentication and protected pages using the included server-side auth and React Context session storage.
- Build a multi-language website: Enable i18n with next-i18next and manage translations with the pre-configured setup.
- Ship with automated quality checks: Use the GitHub Actions workflows for CI/CD, plus husky, commitlint, eslint, and prettier to keep the codebase clean.
How does it work?
- Click "Use this template" on GitHub or run
pnpm dlx degit cnoside/nextjs-mantine-template my-app to copy the template.
- Install dependencies with
pnpm install.
- Start the development server with
pnpm dev and open http://localhost:3000.
FAQ
What package manager does this template require?
The template uses pnpm. You need to have pnpm installed, along with Node.js v14.16 or newer, as stated in the prerequisites.
Does this template include authentication?
Yes, server-side authentication is implemented using Next.js data fetching methods. Authenticated sessions are stored using React Context.
What UI library is used?
The template is built with Mantine UI, which provides the component library and styling system for the entire application.
Is internationalization supported?
Yes, the template includes next-i18next for multi-language support, allowing you to add translations to your Next.js app.
commitlint, husky, eslint, and prettier are included to enforce commit message conventions, Git hooks, linting, and formatting.
