Next App Template screenshot

Next App Template

Author Avatar Theme by Mantinedev
Updated: 14 May 2025
318 Stars

Mantine + Next.js app router template (7.0+)

Categories

Product Analysis: Mantine Next.js Template

Overview:

The Mantine Next.js template is a versatile template for building Next.js applications with the Mantine UI library. It provides a pre-configured setup with a range of features and scripts to help streamline the development process. Whether you prefer using app routers or pages routers, this template has got you covered.

Features:

  • PostCSS with mantine-postcss-preset: The template includes PostCSS integration with the mantine-postcss-preset, allowing you to easily customize and style your Next.js app.
  • TypeScript: Build your application with the power and safety of TypeScript, ensuring type safety and improved code quality.
  • Storybook: Get instant access to Storybook, a valuable tool for developing and testing UI components in isolation.
  • Jest setup with React Testing Library: Effortlessly run tests using Jest and leverage the React Testing Library to test your React components.
  • ESLint setup with eslint-config-mantine: Ensure code quality and consistency with the built-in ESLint setup and the popular eslint-config-mantine configuration.
  • npm scripts: The template provides a range of scripts to streamline your development workflow, including building for production, analyzing application bundles, type checking, running tests, and more.

Installation:

To install the Mantine Next.js template, follow these steps:

  1. Start by cloning the template repository using the following command in your terminal:

    git clone [repository-url]
    
  2. Navigate to the cloned project directory:

    cd [project-directory]
    
  3. Install the required dependencies using npm or yarn:

    npm install
    

That’s it! You’re now ready to start using the Mantine Next.js template for your Next.js application.

Summary:

The Mantine Next.js template is a powerful and feature-rich template for building Next.js applications with the Mantine UI library. With its pre-configured setup, it allows developers to quickly bootstrap their projects and focus more on building their application logic. From styling with PostCSS to testing with Jest and React Testing Library, the template provides an extensive suite of tools to facilitate seamless development. Whether you’re new to Next.js or an experienced developer, the Mantine Next.js template can be an excellent choice for your next project.