DEV Community

Cover image for Stop manual boilerplate: Scaffolding Next.js with MUI
Vikash Kumar
Vikash Kumar

Posted on

Stop manual boilerplate: Scaffolding Next.js with MUI

Why I built this

Every time I start a new project, I love to go with nextjs + mui combo.
But it is frustating to build the theme system each time from scratch ( Of course I want a granular control over theme tokens )

One thing is very common that is the theme system architecture for mui setup.

Just think about a scenario spinning up a cli that do the exact work you want to do.

Features at a glance

  • MUI Integration: Pre-configured theme folder parallel to the app directory.
  • Clean Code by Default: Integrated eslint-plugin-perfectionist for auto-sorting imports/exports.
  • Next.js Optimized: Built specifically for the latest Next.js patterns.

See it in action

GitHub logo thatonevikash / create-next-mui

A blazing-fast interactive CLI to generate production-ready Next.js applications seamlessly integrated with Material UI and strict architectural linting.

create-next-mui ๐Ÿš€

A blazing-fast, interactive CLI tool to instantly scaffold production-ready Next.js applications pre-configured with Material UI (MUI), robust theme providers, and an elite architectural linting layout.

Stop wasting time wiring up Emotion caches, Next.js App Router layout configs, or sorting your imports manually. Launch your next project perfectly in under 10 seconds.


๐Ÿš€ Quick Start

You don't need to install anything globally. Just run the following command in your terminal:

npx create-next-mui
Enter fullscreen mode Exit fullscreen mode

The interactive prompt engine (powered by @clack/prompts) will guide you through naming your project and selecting your preferred flavor.


โœจ Key Features

  • โšก Modern Architecture: Built natively on top of the Next.js App Router structure.
  • ๐ŸŽจ Material UI Ready: Seamless compilation of MUI components inside Server and Client Components with pre-configured UI themes.
  • ๐Ÿงฉ Dual-Template Architecture: Full support for both TypeScript and JavaScript boilerplates.
  • ๐Ÿงผ Perfectionist Linting Config: Pre-packaged with ESLint v9 Flat Config (โ€ฆ

How to use it

To get started, run the following command in your terminal:

npx create-next-mui@latest

# or

npm init next-mui
Enter fullscreen mode Exit fullscreen mode

A closer look at the "Perfectionist" setup

I prefer organized import and export statements, when you are building something that can scale over time, it is better to architect it beautifully!

Keep building

Top comments (0)